*,

*::before,

*::after {

box-sizing: border-box;

margin: 0;

padding: 0
}

:root {
--sw-gradient: linear-gradient(135deg, var(--primary), var(--secondary));

--primary: #1D4ED8;

--secondary: #2563EB;

--navy: #1E3A8A;

--orange2: #3B82F6;

--gray: #6B7280;

--light: #F5F8FF;

--white: #ffffff;

--sl50: #F5F8FF;

--sl100: #EEF2FF;

--sl200: #E0E7FF;

--sl300: #C7D2FE;

--sl400: #818CF8;

--sl600: #3730A3;

--sl800: #1E1B4B;

--border: rgba(30, 27, 75, 0.10);

--shadow-sm: 0 1px 3px rgba(30, 27, 75, 0.07), 0 1px 2px rgba(30, 27, 75, 0.04);

--shadow-md: 0 4px 16px rgba(30, 27, 75, 0.09), 0 2px 6px rgba(30, 27, 75, 0.05);

--shadow-lg: 0 20px 50px rgba(30, 27, 75, 0.11), 0 4px 12px rgba(30, 27, 75, 0.06);

--shadow-xl: 0 30px 70px rgba(30, 27, 75, 0.13);

/* Season accent colors */

--spring: #06B6D4;

--summer: #6366F1;

--autumn: #8B5CF6;

--winter: #0EA5E9;

/* Semantic color assignments for mobile menu icons */

--blue: #1D4ED8;

--green: #10B981;

--orange: #F59E0B;

--purple: #8B5CF6;

--teal: #0EA5E9;

--rose: #EC4899;

--sl500: #64748B;

/* Factory Page Variables */

--fac-bg-base: #FFFFFF;

--fac-bg-alt: #F8FAFC;

--fac-bg-glass: rgba(255, 255, 255, 0.85);

--fac-border-light: #E2E8F0;

--fac-border-strong: #CBD5E1;

--fac-text-main: #0F172A;

--fac-text-muted: #475569;

--fac-text-dim: #94A3B8;

--fac-primary-light: #EFF6FF;

--fac-secondary-light: #ECFEFF;

--fac-orange-light: #FFFBEB;

--fac-font-main: 'Poppins', sans-serif;

--fac-font-mono: 'Poppins', sans-serif;

--fac-radius-sm: 8px;

--fac-radius-md: 16px;

--fac-radius-lg: 24px;

--fac-shadow-primary: 0 10px 15px -3px rgba(29, 78, 216, 0.2);

    /* ============================================================
       ACCESSIBLE TYPOGRAPHY SYSTEM (WCAG 2.1 AA/AAA COMPLIANT)
       Unified Scale for Headings (h1-h6), Paragraphs (p) & Lead Text
       Responsive across Desktop, Tablet, Mobile & Zoom (150%-175%)
       ============================================================ */
    --font-primary: 'Poppins', sans-serif;
    --bs-body-font-family: 'Poppins', sans-serif;
    --bs-font-sans-serif: 'Poppins', sans-serif;
    
    /* Standardized Heading 1 Scale (Unified across whole website) */
    --text-h1: clamp(2rem, 3.2vw, 2.5rem);
    --text-h1-lh: 1.15;
    --text-h1-weight: 600;
    --text-h1-ls: -0.025em;
    --text-h1-margin: 0 0 1.25rem 0;

    /* Standardized Heading 2 Scale (Unified across section titles) */
    --text-h2: clamp(1.75rem, 2.8vw, 2.25rem);
    --text-h2-lh: 1.25;
    --text-h2-weight: 700;
    --text-h2-ls: -0.02em;
    --text-h2-margin: 0 0 1rem 0;

    /* Standardized Heading 3 Scale (Unified across card/category titles) */
    --text-h3: clamp(1.35rem, 2.2vw, 1.65rem);
    --text-h3-lh: 1.3;
    --text-h3-weight: 600;
    --text-h3-ls: -0.015em;
    --text-h3-margin: 0 0 0.85rem 0;

    /* Standardized Heading 4 Scale */
    --text-h4: clamp(1.15rem, 1.6vw, 1.10rem);
    --text-h4-lh: 1.35;
    --text-h4-weight: 500;
    --text-h4-ls: -0.01em;
    --text-h4-margin: 0 0 0.75rem 0;

    /* Standardized Heading 5 Scale */
    --text-h5: 1.125rem;
    --text-h5-lh: 1.4;
    --text-h5-weight: 500;
    --text-h5-ls: 0;
    --text-h5-margin: 0 0 0.5rem 0;

    /* Standardized Heading 6 Scale */
    --text-h6: 0.95rem;
    --text-h6-lh: 1.45;
    --text-h6-weight: 500;
    --text-h6-ls: 0.01em;
    --text-h6-margin: 0 0 0.35rem 0;

    /* Hero Banner Description / Subtitle */
    --text-hero-desc: 1.25rem;
    --text-hero-desc-lh: 1.7;
    --text-hero-desc-weight: 400;

    /* Lead / Section Subtitle Paragraphs */
    --text-lead: clamp(1rem, 1.4vw, 1.125rem);
    --text-lead-lh: 1.65;
    --text-lead-weight: 400;
    --text-lead-color: #64748b;
    --text-lead-margin: 0 auto 2rem auto;

    /* Standard Paragraph Scale (Unified across whole website) */
    --text-body: 1rem;
    --text-body-lh: 1.7;
    --text-body-weight: 400;
    --text-body-color: #475569;
    --text-body-margin: 0 0 1rem 0;

    /* Small Caption / Helper Text */
    --text-small: 0.875rem;
    --text-small-lh: 1.55;
    --text-small-weight: 400;
    --text-small-color: #64748b;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--font-primary);
}

body {
    background: #ffffff;
   
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Responsive adjustments for headings and body across screen sizes & zoom */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --text-h1: clamp(1.85rem, 4.5vw, 2.5rem);
        --text-h2: clamp(1.55rem, 3.5vw, 2rem);
        --text-h3: clamp(1.25rem, 2.8vw, 1.5rem);
        --text-h4: clamp(1.1rem, 2vw, 1.25rem);
        --text-hero-desc: 1.15rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --text-h1: clamp(1.65rem, 6vw, 2.15rem);
        --text-h1-lh: 1.22;
        --text-h2: clamp(1.35rem, 4.8vw, 1.75rem);
        --text-h2-lh: 1.25;
        --text-h3: clamp(1.18rem, 3.8vw, 1.4rem);
        --text-h3-lh: 1.28;
        --text-h4: clamp(1.05rem, 3vw, 1.2rem);
        --text-h4-lh: 1.32;
        --text-h5: 1rem;
        --text-h5-lh: 1.38;
        --text-h6: 0.875rem;
        --text-h6-lh: 1.4;
        --text-hero-desc: 1.05rem;
        --text-hero-desc-lh: 1.6;
        --text-lead: 1rem;
        --text-lead-lh: 1.6;
        --text-body: 0.95rem;
        --text-body-lh: 1.65;
        --text-small: 0.8125rem;
    }
}

/* ============================================================
   GLOBAL ACCESSIBILITY & UNIFIED HEADING HIERARCHY
   Prevents overflow at 150% and 175% zoom via break-word & auto wrap
   ============================================================ */

/* Unified H1 across all page hero titles and banners */
h1,
.h1,
.hero-title,
.hero-title-center,
.ct-hero-title,
.s2-title,
.about-hero-title,
.bd-hero-title,
.bro-hero-title,
.c-hero-title,
.cl-hero-title,
.gallery-hero-title,
.p-hero-title,
.terms-hero-title,
.testi-hero-title,
.htitle,
.crm-hero .hero-title,
.sw-hero .hero-title,
.hw-hero .hero-title,
.product-hero .hero-title,
.web-hero .hero-title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h1) !important;
    font-weight: var(--text-h1-weight) !important;
    line-height: var(--text-h1-lh) !important;
    letter-spacing: var(--text-h1-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified H2 across all section titles and major headings */
h2,
.h2,
.section-title,
.stitle,
.ct-section-title,
.cl-sec-title,
.hiw-title-custom,
.cta-heading,
.about-sec-title,
.career-section-title,
.factory-section-title,
.sw-features .section-title,
.contact-banner h2,
.ct-form-header h2,
.ct-fullhours-left h2,
.section-header h2,
.module-content h2,
.cta-section h2,
.factory-detail-wrapper .section-head h2,
.factory-detail-wrapper .why-copy h2,
.nlw h2 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h2) !important;
    font-weight: var(--text-h2-weight) !important;
    line-height: var(--text-h2-lh) !important;
    letter-spacing: var(--text-h2-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified H3 across subsection cards, product names, category headers */
h3,
.h3,
.product-title,
.pc-title,
.hiw-detail-heading,
.sol-title,
.software-card-title,
.module-card-content h3,
.factory-detail-wrapper .step-body h3,
.factory-detail-wrapper .feature-card h3 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h3) !important;
    font-weight: var(--text-h3-weight) !important;
    line-height: var(--text-h3-lh) !important;
    letter-spacing: var(--text-h3-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified H4 across feature cards, component headers, modal headers */
h4,
.h4,
.feature-title,
.feat-content h4,
.feat-card h4,
.why-card h4,
.challenge-card h4,
.feature-box h4,
.benefits-section-new .why-card h4,
.factory-detail-wrapper .benefit-item h4,
.hrscta h4,
.sovbox h4,
.sol-item h4 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h4) !important;
    font-weight: var(--text-h4-weight) !important;
    line-height: var(--text-h4-lh) !important;
    letter-spacing: var(--text-h4-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified H5 across card subheaders and timeline headers */
h5,
.h5,
.feature-card-title,
.bl-featured-title,
.ind-card h5,
.tl-content h5,
.tl-left h5,
.tl-right h5,
.gpcap h5 {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h5) !important;
    font-weight: var(--text-h5-weight) !important;
    line-height: var(--text-h5-lh) !important;
    letter-spacing: var(--text-h5-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified H6 across mini titles, overlines, badges */
h6,
.h6,
.fti h6,
.newsletter-badge {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h6) !important;
    font-weight: var(--text-h6-weight) !important;
    line-height: var(--text-h6-lh) !important;
    letter-spacing: var(--text-h6-ls) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Unified Hero Banner Descriptions across all pages */
.hero-desc,
.ct-hero-desc,
.hero-desc-center,
.crm-hero .hero-desc,
.sw-hero .hero-desc,
.hw-hero .hero-desc,
.product-hero .hero-desc,
.web-hero .hero-desc,
.hero-slider.microlan-hero .hero-desc {
    font-family: var(--font-primary) !important;
    font-size: var(--text-hero-desc) !important;
    font-weight: var(--text-hero-desc-weight) !important;
    line-height: var(--text-hero-desc-lh) !important;
    color: var(--text-lead-color) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.hero-desc *,
.ct-hero-desc *,
.hero-desc-center *,
.crm-hero .hero-desc *,
.sw-hero .hero-desc *,
.hw-hero .hero-desc *,
.product-hero .hero-desc *,
.web-hero .hero-desc * {
    font-family: var(--font-primary) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.hero-desc p,
.ct-hero-desc p,
.hero-desc-center p,
.crm-hero .hero-desc p,
.sw-hero .hero-desc p,
.hw-hero .hero-desc p,
.product-hero .hero-desc p,
.web-hero .hero-desc p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-hero-desc) !important;
    font-weight: var(--text-hero-desc-weight) !important;
    line-height: var(--text-hero-desc-lh) !important;
    color: var(--text-lead-color) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align:  justify !important;
}

/* Lead & Section Subtitle Paragraphs */
.lead,
p.lead,
.section-subtitle,
.sdesc,
.s-desc,
.hiw-desc-custom,
.section-desc {
    font-family: var(--font-primary) !important;
    font-size: var(--text-lead) !important;
    font-weight: var(--text-lead-weight) !important;
    line-height: var(--text-lead-lh) !important;
    color: var(--text-lead-color) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Standard Body Paragraphs (Unified 16px across whole website) */
p {
    font-family: var(--font-primary);
    font-size: var(--text-body) !important;
    line-height: var(--text-body-lh) !important;
    color: var(--text-body-color);
    margin-top: 0;
    margin-bottom: var(--text-body-margin, 1rem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* CMS, API, Dynamic Descriptions, Cards & Content blocks */
.service-desc,
.service-desc p,
.product-desc,
.product-desc p,
.about-desc p,
.service-about-desc p,
.feature-card-desc,
.crm-feature-card p,
.web-feature-card p,
.feat-item p,
.card-text,
.rich-text p,
.entry-content p,
.module-card-content p,
.why-card p,
.feature-box p,
.challenge-card p,
.sol-item p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body) !important;
    line-height: var(--text-body-lh) !important;
    color: var(--text-body-color) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.service-desc *,
.product-desc *,
.about-desc *,
.rich-text *,
.entry-content * {
    font-family: var(--font-primary) !important;
}

/* CMS Headings */
.rich-text h1, .entry-content h1, .service-desc h1, .product-desc h1 { font-size: var(--text-h1) !important; font-weight: var(--text-h1-weight) !important; line-height: var(--text-h1-lh) !important; }
.rich-text h2, .entry-content h2, .service-desc h2, .product-desc h2 { font-size: var(--text-h2) !important; font-weight: var(--text-h2-weight) !important; line-height: var(--text-h2-lh) !important; }
.rich-text h3, .entry-content h3, .service-desc h3, .product-desc h3 { font-size: var(--text-h3) !important; font-weight: var(--text-h3-weight) !important; line-height: var(--text-h3-lh) !important; }
.rich-text h4, .entry-content h4, .service-desc h4, .product-desc h4 { font-size: var(--text-h4) !important; font-weight: var(--text-h4-weight) !important; line-height: var(--text-h4-lh) !important; }
.rich-text h5, .entry-content h5, .service-desc h5, .product-desc h5 { font-size: var(--text-h5) !important; font-weight: var(--text-h5-weight) !important; line-height: var(--text-h5-lh) !important; }
.rich-text h6, .entry-content h6, .service-desc h6, .product-desc h6 { font-size: var(--text-h6) !important; font-weight: var(--text-h6-weight) !important; line-height: var(--text-h6-lh) !important; }

/* Small helper / caption paragraphs */
small,
.small,
p.small,
.text-small,
.text-muted.small,
.meta-text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-small) !important;
    line-height: var(--text-small-lh) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

body::before {

content: '';

position: fixed;

inset: 0;

background:

radial-gradient(ellipse 70% 50% at 65% 0%, rgba(29, 78, 216, 0.05) 0%, transparent 60%),

radial-gradient(ellipse 50% 40% at 5% 90%, rgba(238, 242, 255, 0.8) 0%, transparent 60%);

pointer-events: none;

z-index: 0;

}

/* ===== ANIMATIONS ===== */

@keyframes float {

0%,

100% {

transform: translateY(0)
    }

50% {

transform: translateY(-18px)
    }

}

@keyframes floatMed {

0%,

100% {

transform: translateY(0)
    }

50% {

transform: translateY(-18px)
    }

}

@keyframes floatFast {

0%,

100% {

transform: translateY(0)
    }

50% {

transform: translateY(-18px)
    }

}

@keyframes fadeInUp {

0% {

opacity: 0;

transform: translateY(24px)
    }

100% {

opacity: 1;

transform: translateY(0)
    }

}

@keyframes spinSlow {

from {

transform: rotate(0deg)
    }

to {

transform: rotate(360deg)
    }

}

@keyframes spinRev {

from {

transform: rotate(360deg)
    }

to {

transform: rotate(0deg)
    }

}

@keyframes pulse2 {

0%,

100% {

opacity: 1
    }

50% {

opacity: .5
    }

}

@keyframes bounce2 {

0%,

100% {

transform: translateY(0)
    }

50% {

transform: translateY(-8px)
    }

}

@keyframes blink {

0%,

100% {

opacity: 1
    }

50% {

opacity: .3
    }

}

@keyframes slideDown {

from {

opacity: 0;

transform: translateY(-10px)
    }

to {

opacity: 1;

transform: translateY(0)
    }

}

.af-slow {

animation: float 6s ease-in-out infinite
}

.af-med {

animation: floatMed 5s ease-in-out 1s infinite
}

.af-fast {

animation: floatFast 4s ease-in-out .5s infinite
}

.af-fiu {

animation: fadeInUp .85s ease-out forwards
}

.af-ss {

animation: spinSlow 20s linear infinite
}

.af-sr {

animation: spinRev 15s linear infinite
}

.af-sd {

animation: spinSlow 30s linear infinite
}

.af-ps {

animation: pulse2 8s ease-in-out infinite
}

.af-bn {

animation: bounce2 4s ease-in-out infinite
}

.af-bl {

animation: blink 2s ease-in-out infinite
}

/* ===== NAVBAR ===== */

nav {

position: fixed;

top: 14px;

left: 50%;

transform: translateX(-50%);

z-index: 200;

width: calc(100% - 40px);

max-width: 1280px;

background: #FFFFFF;

border: 1px solid rgba(226, 232, 240, 0.85);

border-radius: 19px;

box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);

transition: all 0.3s ease;

}

.nav-inner {

padding: 0 16px 0 24px;

height: 64px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 12px;

}

/* logo */

.logo {

display: flex;

align-items: center;

gap: 9px;

text-decoration: none;

flex-shrink: 0;

}

.logo-box {

background: transparent;

padding: 0;

border-radius: 0;

display: inline-flex;

align-items: center;

justify-content: center;

box-shadow: none;

}

.logo-diamond img {

height: 60px;

width: auto;

display: block;

object-fit: contain;

}

.logo-text {

font-size: 18px;

font-weight: 700;

letter-spacing: -.5px;

color: var(--navy);

}

/* nav links */

.nav-links {

display: flex;

align-items: center;

gap: 4px;

list-style: none;

}

.nav-item {

position: relative;

}

.nav-item>a,

.nav-item>button {

display: flex;

align-items: center;

gap: 6px;

font-size: 15px;

font-weight: 500;

color: #334155;

text-decoration: none;

background: none;

border: none;

cursor: pointer;

padding: 8px 14px;

border-radius: 9999px;

transition: all 0.2s ease;

white-space: nowrap;

position: relative;

}

.nav-item>a:hover,

.nav-item>button:hover,

.nav-item.open>a,

.nav-item.open>button {

color: #1D4ED8;

background: rgba(29, 78, 216, 0.06);

}

.nav-item.active>a,

.nav-item.active>button {

color: #1D4ED8;

font-weight: 600;

}

.nav-item.active>a::after,

.nav-item.active>button::after {

content: '';

position: absolute;

bottom: -2px;

left: 14px;

right: 14px;

height: 2.5px;

background: #1D4ED8;

border-radius: 99px;

}

.nav-item>button .chev-xs {

width: 14px;

height: 14px;

transition: transform .2s;

flex-shrink: 0
}

.nav-item.open>button .chev-xs {

transform: rotate(180deg)
}

/* ── MEGA DROPDOWN ── */

.dropdown {

display: none;

position: absolute;

top: calc(100% + 10px);

left: 50%;

transform: translateX(-50%);

background: #fff;

border: 1px solid var(--border);

border-radius: 18px;

padding: 20px;

box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);

animation: slideDown .18s ease forwards;

z-index: 300;

min-width: 560px;

}

/* Invisible bridge so hover is not lost when moving mouse from nav item to dropdown */

.dropdown::before {

content: "";

position: absolute;

top: -15px;

left: 0;

right: 0;

height: 15px;

background: transparent;

}

/* narrow dropdown for Pricing/Resources */

.dropdown.narrow {

min-width: 220px
}

.nav-item.open .dropdown {

display: block
}

/* dropdown heading */

.dd-heading {

font-size: 10px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: .08em;

color: var(--sl400);

margin-bottom: 12px;

padding: 0 4px;

}

/* row grid */

.dd-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 6px;

}

.dd-grid.cols2 {

grid-template-columns: repeat(2, 1fr)
}

.dd-grid.cols1 {

grid-template-columns: 1fr
}

.dd-item {

display: flex;

align-items: flex-start;

gap: 12px;

padding: 12px;

border-radius: 12px;

text-decoration: none;

transition: all .16s;

border: 1px solid transparent;

}

.dd-item:hover {

background: var(--sl50);

border-color: var(--border)
}

.dd-icon {

width: 36px;

height: 36px;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 16px;

flex-shrink: 0;

margin-top: 1px;

}

.ic-blue {

background: #EFF6FF
}

.ic-orange {

background: #FFF7ED
}

.ic-green {

background: #F0FDF4
}

.ic-purple {

background: #F5F3FF
}

.ic-rose {

background: #FFF1F2
}

.ic-teal {

background: #F0FDFA
}

.dd-text {

display: flex;

flex-direction: column;

gap: 2px
}

.dd-title {

font-size: 13px;

font-weight: 700;

color: var(--navy);

line-height: 1.3
}

.dd-sub {

font-size: 11px;

font-weight: 500;

color: var(--sl400);

line-height: 1.4
}

/* divider inside dropdown */

.dd-divider {

height: 1px;

background: var(--sl100);

margin: 14px 0
}

/* nav actions */

.nav-actions {

display: flex;

align-items: center;

gap: 10px;

flex-shrink: 0
}

.btn-signin {

font-size: 14px;

font-weight: 600;

color: var(--sl600);

background: none;

border: none;

cursor: pointer;

padding: 8px 14px;

border-radius: 10px;

transition: all .18s;

}

.btn-signin:hover {

color: var(--navy);

background: var(--sl100)
}

.btn-gs {

display: inline-flex;

align-items: center;

gap: 8px;

background: linear-gradient(135deg, #0066FF 0%, #1D4ED8 100%);

color: #FFFFFF !important;

font-size: 14.5px;

font-weight: 600;

padding: 10px 24px;

border-radius: 9999px;

border: none;

cursor: pointer;

box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);

transition: all .22s;

white-space: nowrap;

text-decoration: none;

}

.btn-gs:hover {

background: linear-gradient(135deg, #1e40af 0%, var(--primary) 100%);

box-shadow: 0 8px 24px rgba(37, 99, 235, 0.6);

transform: translateY(-1px);

color: #FFFFFF !important;

}

.btn-gs:active {

transform: translateY(0);

}

.gs-arrow {

transition: transform .18s;

}

.btn-gs:hover .gs-arrow {

transform: translateX(4px);

}

/* hamburger */

.hamburger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 10px;
cursor: pointer;
transition: all .2s ease;
}

.hamburger:hover,
.hamburger.open {
background: #EFF6FF;
border-color: #BFDBFE;
}

.hamburger span {
display: block;
width: 20px;
height: 2.2px;
background: #0F172A;
border-radius: 2px;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger.open span:nth-child(1) {
transform: translateY(7.2px) rotate(45deg);
background: #0056E0;
}

.hamburger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
transform: translateY(-7.2px) rotate(-45deg);
background: #0056E0;
}

/* mobile menu */

.mob-menu {
display: none;
position: fixed;
top: 76px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 28px);
max-width: 480px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(226, 232, 240, 0.95);
border-radius: 18px;
z-index: 9999;
padding: 16px;
flex-direction: column;
gap: 3px;
box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.16), 0 0 1px 1px rgba(0, 0, 0, 0.05);
animation: slideDown .18s ease;
}

.mob-menu.open {
display: flex !important;
}

.mob-menu a {
font-size: 14.5px;
font-weight: 600;
color: #1E293B;
text-decoration: none;
padding: 10px 14px;
border-radius: 10px;
transition: all .18s ease;
display: flex;
align-items: center;
gap: 10px;
}

.mob-menu a:hover,
.mob-menu a.active {
color: #0056E0;
background: #EFF6FF;
}

.mob-scroll-area::-webkit-scrollbar {
width: 4px;
}

.mob-scroll-area::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}

.mob-div {
height: 1px;
background: #E2E8F0;
margin: 8px 0;
}

.mob-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}

.mob-signin {
font-size: 14px;
font-weight: 600;
color: #475569;
background: none;
border: 1px solid #CBD5E1;
border-radius: 11px;
padding: 11px;
cursor: pointer;
transition: all .18s ease;
text-align: center;
}

.mob-signin:hover {
color: #0056E0;
border-color: #93C5FD;
background: #EFF6FF;
}

.mob-gs {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #0056E0 0%, #1D4ED8 100%);
color: #FFFFFF !important;
font-size: 14px;
font-weight: 700;
padding: 12px 18px;
border-radius: 12px;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 86, 224, 0.28);
transition: all .18s ease;
text-decoration: none;
}

.mob-gs:hover {
background: linear-gradient(135deg, #004ac4 0%, #173fa3 100%);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 86, 224, 0.35);
}

/* ===== MAIN ===== */

main {
 

position: relative;

z-index: 1
}

.hero {

position: relative;

min-height: calc(95vh - 96px);

display: flex;

align-items: center;

overflow: visible;

}

.hero-wrap {

max-width: 1280px;

margin: 0 auto;

padding: 11px 24px;

width: 100%;

position: relative;

}

/* bg dots */

/* .dot {

position: absolute;

border-radius: 50%

} */

.d1 {

top: 20%;

left: 18%;

width: 7px;

height: 7px;

background: rgba(29, 78, 216, 0.35)
}

.d2 {

bottom: 28%;

left: 28%;

width: 11px;

height: 11px;

background: rgba(30, 27, 75, 0.04)
}

.d3 {

top: 48%;

right: 28%;

width: 7px;

height: 7px;

background: rgba(29, 78, 216, 0.18)
}

.hero-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 64px;

align-items: center;

}

/* hero text */

.hero-content {

position: relative;

z-index: 10
}

.badge {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 5px 14px;

background: var(--sl50);

border: 1px solid var(--sl200);

border-radius: 999px;

margin-bottom: 28px;

}

.badge-dot {

width: 7px;

height: 7px;

background: var(--orange);

border-radius: 50%
}

.badge-txt {

font-size: 12px;

font-weight: 700;

letter-spacing: .1em;

text-transform: uppercase;

color: var(--gray)
}

.hero-title {

font-size: var(--text-h1);

font-weight: var(--text-h1-weight);

line-height: var(--text-h1-lh);

margin-bottom: 24px;

letter-spacing: var(--text-h1-ls);
 

}

.grad-text {

background: linear-gradient(to bottom right, var(--navy) 35%, var(--primary));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.hero-desc {
font-family: 'Poppins', sans-serif !important;
font-size: var(--text-hero-desc) !important;
font-weight: var(--text-hero-desc-weight) !important;
color: var(--text-lead-color) !important;
max-width: 600px;
margin-bottom: 2.5rem;
line-height: var(--text-hero-desc-lh) !important;
text-align: left !important;
}

.hero-desc * {
font-family: 'Poppins', sans-serif !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
}

.hero-desc p {
font-family: 'Poppins', sans-serif !important;
font-size: 1.25rem !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: #64748b !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
display: inline !important;
}

.hero-desc p + p {
display: block !important;
margin-top: 12px !important;
}

.hero-desc p:last-child {
margin-bottom: 0 !important;
}

.hero-btns {

display: flex;

flex-wrap: wrap;

gap: 14px
}

.btn-explore {

display: flex;

align-items: center;

gap: 9px;

background: var(--navy);

color: #fff;

font-size: 15px;

font-weight: 700;

padding: 17px 34px;

border-radius: 14px;

border: none;

cursor: pointer;

box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07);

transition: all .2s;

text-decoration: none;

}

.btn-explore:hover {

transform: translateY(-2px);

box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3)
}

.btn-explore .arr {

transition: transform .2s
}

.btn-explore:hover .arr {

transform: translateX(5px)
}

.btn-demo {

display: flex;

align-items: center;

gap: 9px;

background: #fff;

color: var(--navy);

border: 1px solid var(--sl200);

font-size: 15px;

font-weight: 700;

padding: 17px 34px;

border-radius: 14px;

cursor: pointer;

transition: all .2s;

text-decoration: none;

box-shadow: var(--shadow-sm);

}

.btn-demo:hover {

background: var(--sl50);

border-color: var(--sl300);

box-shadow: var(--shadow-md)
}

.cal-ic {

color: var(--orange);

transition: transform .2s
}

.btn-demo:hover .cal-ic {

transform: scale(1.1)
}

.hero-stats {

margin-top: 56px;

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 28px;

border-top: 1px solid var(--sl100);

padding-top: 32px;

}

.stat-val {

font-size: 32px;

font-weight: 700;

color: var(--navy);

margin-bottom: 3px
}

.stat-lbl {

font-size: 13px;

font-weight: 500;

color: var(--gray)
}

/* ===== WIDGETS ===== */

.hero-widgets {

position: relative;

height: 650px
}

.anim-bg {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

pointer-events: none;

overflow: visible;

}

.orbit {

position: relative;

width: 500px;

height: 500px
}

.r-outer {

position: absolute;

inset: 0;

border: 1.5px solid rgba(29, 78, 216, 0.38);

border-radius: 50%
}

.r-mid {

position: absolute;

inset: 40px;

border: 1px solid rgba(96, 165, 250, 0.22);

border-radius: 50%
}

.r-glow {

position: absolute;

inset: 96px;

border-radius: 50%;

background: radial-gradient(circle, rgba(29, 78, 216, 0.20), transparent);

filter: blur(24px);

opacity: .7
}

.r-dot {

position: absolute;

inset: 24px;

border: 1px dashed rgba(37, 99, 235, 0.60);

border-radius: 50%
}

.r-center {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

z-index: 40
}

.orb-ring {

width: 60px;

height: 60px;

background: #fff;

border-radius: 50%;

box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);

border: 1px solid rgba(15, 23, 42, 0.06);

display: flex;

align-items: center;

justify-content: center;

}

.orb-in {

width: 30px;

height: 30px;

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center
}

.orb-d {

border-radius: 2px;

}

/* glass card LIGHT */

.glass {

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(14px);

-webkit-backdrop-filter: blur(14px);

border: 1px solid rgba(15, 23, 42, 0.08);

box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);

}

/* CRM widget */

.w-crm {

position: absolute;

top: 0;

right: 0;

width: 355px;

border-radius: 26px;

padding: 24px;

z-index: 20
}

.w-crm-hd {

display: flex;

align-items: center;

gap: 13px;

margin-bottom: 24px
}

.w-ico {

width: 44px;

height: 44px;

border-radius: 13px;

display: flex;

align-items: center;

justify-content: center
}

.w-ico-b {

background: #EFF6FF
}

.w-ico svg {

width: 24px;

height: 24px;

color: #3B82F6
}

.w-ttl {

font-size: 14px;

font-weight: 700;

color: var(--navy)
}

.w-st {

font-size: 11px;

font-weight: 500;

color: var(--gray)
}

.bar-chart {

display: flex;

align-items: flex-end;

justify-content: space-between;

height: 88px;

padding: 0 4px
}

.bar {

width: 17px;

border-radius: 4px 4px 0 0;

transition: all .2s;

cursor: pointer
}

.bar-days {

display: flex;

justify-content: space-between;

margin-top: 10px
}

.bar-day {

font-size: 10px;

font-weight: 700;

color: var(--sl400);

text-transform: uppercase;

letter-spacing: .05em
}

/* Automation widget */

.w-auto {

position: absolute;

top: 140px;

left: -40px;

width: 275px;

border-radius: 22px;

padding: 22px;

z-index: 10
}

.w-auto-hd {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 18px
}

.w-auto-ttl {

font-size: 13px;

font-weight: 700;

color: var(--navy)
}

.bdg-g {

font-size: 11px;

font-weight: 900;

color: #16a34a;

background: #f0fdf4;

padding: 3px 8px;

border-radius: 8px;

border: 1px solid #bbf7d0
}

.pr-row {

margin-bottom: 14px
}

.pr-lbl {

display: flex;

justify-content: space-between;

font-size: 11px;

font-weight: 700;

color: var(--gray);

margin-bottom: 5px
}

.pr-track {

height: 7px;

background: var(--sl100);

border-radius: 999px;

overflow: hidden
}

.pr-fill {

height: 100%;

border-radius: 999px
}

/* POS widget */

.w-pos {

position: absolute;

top: 242px;

right: -99px;

width: 240px;

border-radius: 22px;

padding: 22px;

z-index: 10
}

.w-pos-hd {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 16px
}

.pos-ic {

width: 34px;

height: 34px;

background: var(--sl50);

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 17px;

box-shadow: var(--shadow-sm)
}

.pos-ttl {

font-size: 13px;

font-weight: 700;

color: var(--navy)
}

.pos-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px
}

.pc-b {

background: rgba(239, 246, 255, .5);

border: 1px solid rgba(191, 219, 254, .5);

padding: 13px;

border-radius: 13px
}

.pc-o {

background: rgba(255, 247, 237, .5);

border: 1px solid rgba(254, 215, 170, .5);

padding: 13px;

border-radius: 13px
}

.pos-val {

font-size: 18px;

font-weight: 900;

line-height: 1;

color: var(--navy)
}

.pos-val-o {

color: var(--orange)
}

.pos-lbl {

font-size: 10px;

font-weight: 700;

color: var(--sl400);

margin-top: 3px;

text-transform: uppercase;

letter-spacing: .05em
}

/* Neural widget */

.w-neu {

position: absolute;

bottom: 16px;

left: 0;

width: 290px;

border-radius: 26px;

padding: 22px;

z-index: 20
}

.w-neu-hd {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 16px
}

.neu-ic {

width: 30px;

height: 30px;

background: #ecfdf5;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 14px
}

.neu-ttl {

font-size: 13px;

font-weight: 700;

color: var(--navy)
}

.neu-body {

display: flex;

align-items: center;

gap: 16px
}

.donut {

position: relative;

width: 58px;

height: 58px;

flex-shrink: 0
}

.donut svg {

width: 100%;

height: 100%;

transform: rotate(-90deg)
}

.donut-lbl {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

font-size: 11px;

font-weight: 900;

color: var(--navy)
}

.neu-it {

font-size: 13px;

font-weight: 700;

color: var(--navy);

margin-bottom: 2px
}

.neu-is {

font-size: 11px;

font-weight: 500;

color: var(--gray)
}

/* Pipeline widget */

.w-pipe {

position: absolute;

bottom: 8px;

right: 0;

width: 238px;

border-radius: 22px;

padding: 20px;

z-index: 30
}

.pipe-hd {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 16px
}

.pipe-ttl {

font-size: 12px;

font-weight: 900;

color: var(--navy)
}

.bdg-live {

font-size: 9px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: .05em;

background: #dcfce7;

color: #15803d;

padding: 3px 9px;

border-radius: 999px;

border: 1px solid #bbf7d0
}

.p-step {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 13px
}

.p-step-l {

display: flex;

align-items: center;

gap: 9px
}

.sn {

width: 23px;

height: 23px;

border-radius: 7px;

display: flex;

align-items: center;

justify-content: center;

font-size: 10px;

font-weight: 900
}

.sn-g {

background: #f0fdf4;

color: #16a34a;

border: 1px solid #bbf7d0
}

.sn-o {

background: #fff7ed;

color: #ea580c;

border: 1px solid #fed7aa
}

.sn-s {

background: var(--sl50);

color: var(--sl400);

border: 1px solid var(--sl200);

opacity: .5
}

.s-lbl {

font-size: 11px;

font-weight: 700;

color: #334155
}

.s-lbl.dm {

color: var(--sl400)
}

.ch {

width: 11px;

height: 11px;

color: var(--sl300)
}

/* ===== FOOTER ===== */

footer {

margin-top: 160px;

border-top: 1px solid var(--sl100);

padding: 52px 0;

background: var(--sl50);

position: relative;

z-index: 1;

}

.footer-in {

max-width: 1280px;

margin: 0 auto;

padding: 0 24px;

display: flex;

flex-wrap: wrap;

gap: 20px;

justify-content: space-between;

align-items: center;

}

.ft-logo {

display: flex;

align-items: center;

gap: 10px
}

.ft-lb {

width: 30px;

height: 30px;

background: var(--navy);

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center
}

.ft-ld {

width: 13px;

height: 13px;

background: var(--orange);

border-radius: 2px;

transform: rotate(45deg)
}

.ft-brand {

font-size: 15px;

font-weight: 700;

color: var(--navy)
}

.ft-copy {

font-size: 13px;

font-weight: 500;

color: var(--sl400)
}

.ft-links {

display: flex;

flex-wrap: wrap;

gap: 28px
}

.ft-links a {

font-size: 13px;

font-weight: 600;

color: var(--gray);

text-decoration: none;

transition: color .18s
}

.ft-links a:hover {

color: var(--navy)
}

/* ===== RESPONSIVE ===== */

@media(max-width:1023px) {

nav {

top: 10px;

width: calc(100% - 28px)
    }

.nav-links,

.nav-actions {

display: none
    }

.hamburger {

display: flex
    }

.hero-grid {

grid-template-columns: 1fr;

gap: 40px
    }

.hero-widgets {

display: none
    }

}

@media(max-width:767px) {

main {

padding-top: 88px
    }

.hero-title {

letter-spacing: -1px
    }

.hero-desc {

font-size: 16px;

margin-bottom: 32px
    }

.btn-explore,

.btn-demo {

padding: 14px 26px;

font-size: 14px
    }

.hero-stats {

gap: 12px
    }

.stat-val {

font-size: 26px
    }

footer {

margin-top: 80px
    }

.footer-in {

flex-direction: column;

align-items: flex-start;

gap: 18px
    }

.ft-links {

gap: 18px
    }

}

@media(max-width:480px) {

.hero-btns {

flex-direction: column
    }

.btn-explore,

.btn-demo {

width: 100%;

justify-content: center
    }

.hero-stats {

gap: 8px
    }

.stat-val {

font-size: 22px
    }

.stat-lbl {

font-size: 11px
    }
    .c-fc-3 {
    top: 62%;
    right: -2%;
 }

}

@media(max-width:900px) {

.dd-grid {

grid-template-columns: repeat(2, 1fr) !important
    }

.dropdown {

min-width: 320px !important
    }

}

/* --- OVERRIDES for integration --- */

.hero {

padding: 0 !important;

}

#nexai-hero h1,

#nexai-hero h2,

#nexai-hero h3,

#nexai-hero h4,

#nexai-hero h5,

#nexai-hero h6,

nav h1,

nav h2,

nav h3,

nav h4,

nav h5,

nav h6,

.nav-inner span,

.nav-inner a,

.nav-inner button,

.nav-inner div,

.hero-content *,

.hero-title,

.hero-desc {

font-family: "Poppins", sans-serif;

}

.grad-text {

-webkit-text-fill-color: transparent !important;

}

/* --- NESTED DROPDOWN (Software / Hardware) --- */

.dd-sub-dropdown {

position: relative;

border-radius: 12px;

transition: all .2s;

border: 1px solid transparent;

}

.dd-sub-dropdown:hover {

background: var(--sl50);

border-color: var(--border);

}

/* Prevent double background when hovering the sub-dropdown */

.dd-sub-dropdown:hover .dd-item,

.dd-sub-dropdown .dd-item:hover {

background: transparent !important;

border-color: transparent !important;

}

.nested-links {

display: none;

flex-direction: column;

gap: 2px;

padding: 0 12px 12px 60px;

/* Aligns perfectly with the text of dd-item */

}

.dd-sub-dropdown:hover .nested-links {

display: flex;

animation: slideDown .2s ease forwards;

}

.nested-item {

display: flex;

align-items: center;

gap: 10px;

padding: 8px 12px;

font-size: 13px;

font-weight: 600;

color: var(--sl600);

text-decoration: none;

border-radius: 8px;

transition: all .16s;

background: transparent;

}

.nested-item:hover {

background: var(--white);

color: var(--navy);

box-shadow: var(--shadow-sm);

}

.nested-item i {

color: var(--sl400);

font-size: 14px;

transition: all .16s;

width: 16px;

text-align: center;

}

.nested-item:hover i {

color: var(--navy);

}

/* --- AI BENEFITS FLIP CARDS --- */

.benefit-item-flip {

background-color: transparent;

width: 100%;

height: 87px;

/* Fixed height makes absolute positioning stable */

perspective: 1500px;

margin-bottom: 0;

}

.benefit-item-inner {

position: relative;

width: 100%;

height: 100%;

transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

/* Smooth bouncy effect */

transform-style: preserve-3d;

border-radius: 20px;

}

.benefit-item-flip:hover .benefit-item-inner {

transform: rotateY(180deg);

}

.benefit-item-front,

.benefit-item-back {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border-radius: 20px;

display: flex;

align-items: center;

padding: 24px;

box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);

/* Softer, premium shadow */

border: 1px solid rgba(15, 23, 42, 0.05);

transform: translateZ(0);

/* Prevent flickering */

}

.benefit-item-front {

background: #ffffff;

gap: 20px;

justify-content: flex-start;

z-index: 2;

}

.benefit-item-front .icon-box {

width: 60px;

height: 60px;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

font-size: 28px;

flex-shrink: 0;

transition: all 0.3s ease;

}

.benefit-item-front h4 {

font-size: 1.25rem;

font-weight: 700;

color: var(--navy);

margin: 0;

line-height: 1.3;

}

.benefit-item-back {

background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);

transform: rotateY(180deg) translateZ(0);

justify-content: center;

text-align: center;

border: none;

z-index: 1;

box-shadow: 0 15px 35px rgba(32, 65, 132, 0.2);

}

.benefit-item-back p {

color: #f8fafc !important;

font-size: 1rem;

line-height: 1.6;

margin: 0;

font-weight: 400;

}

/* Responsive adjustments */

@media (max-width: 1199px) {

.benefit-item-flip {

height: 160px;

}

}

@media (max-width: 991px) {

.benefit-item-flip {

height: 150px;

}

}

@media (max-width: 767px) {

.benefit-item-flip {

height: 160px;

}

.benefit-item-front h4 {

font-size: 1.1rem;

}
 .c-fc-3 {
    top: 62% !important;
    right: -2% !important;
 }

}

@media (max-width: 480px) {

.benefit-item-flip {

height: 180px;

}

}

/* testinomial */

/* ── WRAPPER ── */

.testimonial-root {

width: 100%;

max-width: 900px;

margin: 0 auto;

}

/* ── DESKTOP LAYOUT ── */

.desktop-layout {

display: flex;

align-items: center;

position: relative;

}

/* Avatar block */

.avatar-block {
    width: 420px;

height: 420px;

border-radius: 24px;

overflow: hidden;

background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

flex-shrink: 0;

position: relative;

box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.15);

}

.avatar-block img,

.avatar-block .avatar-img {

width: 100%;

height: 100%;

object-fit: cover;

object-position: center 20%;

display: block;

position: absolute;

inset: 0;

opacity: 0;

transform: scale(1.04);

transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.25, 1, 0.35, 1);

pointer-events: none;

z-index: 1;

}
 
/* ── Testimonial Dummy / Placeholder Avatar Sizing & Styling ── */
.avatar-block img[src*="dummy"],
.avatar-block .avatar-img[src*="dummy"],
.avatar-block img[src*=".svg"],
.avatar-block .avatar-img[src*=".svg"],
.avatar-block img.is-dummy,
.avatar-block .avatar-img.is-dummy {
    width: 150px !important;
    height: 150px !important;
    max-width: 45% !important;
    max-height: 45% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    position: absolute !important;
    margin: auto !important;
    inset: 0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 0 0 6px #ffffff !important;
    background: #f1f5f9 !important;
}

@media (max-width: 860px) and (min-width: 701px) {
    .avatar-block img[src*="dummy"],
    .avatar-block .avatar-img[src*="dummy"],
    .avatar-block img[src*=".svg"],
    .avatar-block .avatar-img[src*=".svg"],
    .avatar-block img.is-dummy,
    .avatar-block .avatar-img.is-dummy {
        width: 130px !important;
        height: 130px !important;
    }
}

@media (max-width: 700px) {
    .mobile-layout .avatar-block img[src*="dummy"],
    .mobile-layout .avatar-block .avatar-img[src*="dummy"],
    .mobile-layout .avatar-block img[src*=".svg"],
    .mobile-layout .avatar-block .avatar-img[src*=".svg"],
    .mobile-layout .avatar-block img.is-dummy,
    .mobile-layout .avatar-block .avatar-img.is-dummy {
        width: 110px !important;
        height: 110px !important;
        box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.12), 0 0 0 4px #ffffff !important;
    }
}

.avatar-block img.active,

.avatar-block .avatar-img.active {

opacity: 1;

transform: scale(1);

pointer-events: auto;

z-index: 2;

}

.avatar-block img.fade-out {

opacity: 0;

transform: scale(0.97);

}

.avatar-block img.fade-in {

opacity: 1;

transform: scale(1);

}

/* Info card */

.info-card {

background: var(--white);

border-radius: 24px;

box-shadow: var(--shadow-xl);

padding: 2.25rem 2rem;

margin-left: -72px;

z-index: 10;

flex: 1;

min-width: 0;

border: 1px solid var(--border);

}

.info-card .name {

font-size: 1.35rem;

font-weight: 700;

color: var(--sl800);

margin-bottom: 4px;

line-height: 1.2;

}

.info-card .role {

font-size: 0.8rem;

font-weight: 500;

color: var(--gray);

margin-bottom: 0.75rem;

line-height: 1.4;

}

.testi-stars-row {

display: flex;

align-items: center;

gap: 4px;

margin-bottom: 0.85rem;

}

.testi-stars-row {
    color: #F59E0B;
}

.testi-stars-row i.fa-star.star-filled,
.testi-stars-row i.fa-star:not(.star-empty) {
    color: #F59E0B;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.25));
}

.testi-stars-row i.fa-star.star-empty,
.testi-stars-row .star-empty {
    color: #CBD5E1 !important;
    fill: #CBD5E1 !important;
    filter: none !important;
}

.testi-stars-row svg {
    width: 17px;
    height: 17px;
}

.testi-stars-row svg:not(.star-empty) {
    fill: #F59E0B;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.25));
}

.testi-stars-row svg.star-empty {
    fill: #CBD5E1 !important;
    filter: none !important;
}

/* Quote mark */

.quote-mark {

font-size: 4rem;

line-height: 0.6;

color: var(--primary);

margin-bottom: 0.5rem;

display: block;

opacity: 0.85;

}

.info-card .description {

font-size: 0.9rem;

color: var(--sl800);

line-height: 1.75;
text-align: justify;
margin-bottom: 1.75rem;

}

/* Social icons */

.social-row {

display: flex;

gap: 10px;

}

.social-btn {

width: 44px;

height: 44px;

border-radius: 50%;

background: var(--sl800);

display: flex;

align-items: center;

justify-content: center;

text-decoration: none;

transition: background 0.2s ease, transform 0.2s ease;

flex-shrink: 0;

border: none;

cursor: pointer;

}

.social-btn:hover {

background: var(--primary);

transform: scale(1.08);

}

.social-btn svg {

width: 18px;

height: 18px;

fill: var(--white);

flex-shrink: 0;

}

/* Accent bar on card */

.accent-bar {

width: 40px;

height: 4px;

background: var(--primary);

border-radius: 2px;

margin-bottom: 1rem;

}

/* ── MOBILE LAYOUT ── */

.mobile-layout {

display: none;

flex-direction: column;

align-items: center;

text-align: center;

gap: 1.25rem;

max-width: 400px;

margin: 0 auto;

}

.mobile-layout .avatar-block {

width: 100%;

max-width: 320px;

margin: 0 auto;

height: auto;

aspect-ratio: 1 / 1;

border-radius: 20px;

}

.mobile-layout .info-card {

margin-left: 0;

width: 100%;

padding: 1.5rem;

}

.mobile-layout .social-row {

justify-content: center;

}

/* ── NAVIGATION ── */

.nav-row {

display: flex;

justify-content: center;

align-items: center;

gap: 1.25rem;

margin-top: 2rem;

}

.nav-btn {

width: 46px;

height: 46px;

border-radius: 50%;

background: var(--white);

border: 1px solid var(--sl200);

box-shadow: var(--shadow-md);

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

flex-shrink: 0;

}

.nav-btn:hover {

background: var(--primary);

border-color: var(--primary);

transform: scale(1.06);

}

.nav-btn:hover svg {

stroke: var(--white);

}

.nav-btn svg {

width: 20px;

height: 20px;

stroke: var(--sl800);

fill: none;

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;

transition: stroke 0.2s ease;

}

/* Dots */

.dots {

display: flex;

gap: 8px;

align-items: center;

}

.dot {

height: 10px;

border-radius: 999px;

background: var(--sl300);

border: none;

cursor: pointer;

padding: 0;

transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;

width: 10px;

}

.dot.active {

background: var(--primary);

width: 28px;

}

/* Progress bar */

.progress-container,

.progress-wrap {

width: 100%;

max-width: 420px;

height: 4px;

background: rgba(15, 23, 42, 0.08);

margin: 1.5rem auto 0 auto;

border-radius: 999px;

overflow: hidden;

position: relative;

}

#progressBar,

.progress-bar {

height: 100%;

background: linear-gradient(90deg, #1D4ED8, #3B82F6);

border-radius: 999px;

width: 0%;

transition: width 30ms linear, opacity 0.3s ease;

}

/* Directional slide transitions for testimonial content */

.fade-content {

opacity: 1;

transform: translateX(0);

transition: opacity 0.35s cubic-bezier(0.25, 1, 0.35, 1), transform 0.35s cubic-bezier(0.25, 1, 0.35, 1);

will-change: opacity, transform;

}

.fade-content.slide-out-left {

opacity: 0;

transform: translateX(-24px);

transition: opacity 0.22s ease-in, transform 0.22s ease-in;

}

.fade-content.slide-out-right {

opacity: 0;

transform: translateX(24px);

transition: opacity 0.22s ease-in, transform 0.22s ease-in;

}

.fade-content.slide-prep-right {

opacity: 0 !important;

transform: translateX(24px) !important;

transition: none !important;

}

.fade-content.slide-prep-left {

opacity: 0 !important;

transform: translateX(-24px) !important;

transition: none !important;

}

.fade-content.active,

.fade-content.in {

opacity: 1;

transform: translateX(0);

}

.fade-content.out {

opacity: 0;

transform: translateX(-24px);

}

/* ── RESPONSIVE ── */

@media (max-width: 700px) {

.desktop-layout {

display: none;

}

.mobile-layout {

display: flex;

}

}

@media (min-width: 701px) {

.desktop-layout {

display: flex;

}

.mobile-layout {

display: none;

}

}

@media (max-width: 860px) and (min-width: 701px) {

.avatar-block {

width: 320px;

height: 320px;

}

.info-card {

padding: 1.75rem 1.5rem;

}

.info-card .name {

font-size: 1.15rem;

}

}

/* end testinomial */

/* product */

.wrapper {

width: 100%;

}

/* ── HEADING ── */

.heading {

text-align: center;

margin-bottom: 2.5rem;

}

.heading h1 {

font-size: clamp(2rem, 5vw, 2.7rem);

font-weight: 600;

color: var(--sl800);

letter-spacing: 0.03em;

}

.heading h1 span {

color: var(--primary);

}

.heading p {

font-size: 12px;

color: var(--gray);

margin-top: 8px;

letter-spacing: 0.16em;

text-transform: uppercase;

font-weight: 500;

}

/* ── CARDS ROW ── */

.cards {

display: flex;

gap: 12px;

width: 100%;

height: 520px;

box-shadow: var(--shadow-xl);

border-radius: 20px;

overflow: hidden;
 }

.card {
cursor: pointer !important;

position: relative;

flex: 1;

overflow: hidden;

transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, transform 0.4s ease;

background: var(--sl200);

min-width: 0;

}

.card.active {

transform: scale(1.01);

}

.card.active[data-season="spring"] {

box-shadow: 0 12px 36px rgba(6, 182, 212, 0.38);

}

.card.active[data-season="summer"] {

box-shadow: 0 12px 36px rgba(99, 102, 241, 0.38);

}

.card.active[data-season="autumn"] {

box-shadow: 0 12px 36px rgba(139, 92, 246, 0.38);

}

.card.active[data-season="winter"] {

box-shadow: 0 12px 36px rgba(14, 165, 233, 0.38);

}

/* first and last card rounded corners */

.card:first-child {

border-radius: 20px 0 0 20px;

}

.card:last-child {

border-radius: 0 20px 20px 0;

}

/* Flex expand on active */

.cards:has(.card.active) .card:not(.active) {

flex: 0.4;

}

.cards:has(.card.active) .card.active {

flex: 3;

}

/* ── IMAGE ── */

.card img {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

will-change: transform;

}

.card:hover img {

transform: scale(1.07);

}

/* ── OVERLAY ── */

.card .overlay {

position: absolute;

inset: 0;

background: linear-gradient(to top,

rgba(15, 23, 42, 0.88) 0%,

rgba(15, 23, 42, 0.42) 45%,

rgba(15, 23, 42, 0.08) 100%);

transition: background 0.5s ease;

}

.card:hover .overlay {

background: linear-gradient(to top,

rgba(15, 23, 42, 0.93) 0%,

rgba(15, 23, 42, 0.55) 50%,

rgba(15, 23, 42, 0.12) 100%);

}

/* ── SIDE ACCENT BAR (left edge) ── */

.card .side-accent {

position: absolute;

top: 0;

left: 0;

width: 4px;

height: 0;

transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;

z-index: 3;

}

.card:hover .side-accent {

height: 100%;

}

/* ── BOTTOM ACCENT LINE ── */

.card .accent {

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 3px;

transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;

z-index: 3;

}

.card:hover .accent {

width: 100%;

}

/* Season color assignments */

.card[data-season="spring"] .side-accent,

.card[data-season="spring"] .accent {

background: var(--spring);

}

.card[data-season="summer"] .side-accent,

.card[data-season="summer"] .accent {

background: var(--secondary);

}

.card[data-season="autumn"] .side-accent,

.card[data-season="autumn"] .accent {

background: var(--autumn);

}

.card[data-season="winter"] .side-accent,

.card[data-season="winter"] .accent {

background: var(--winter);

}

/* ── CONTENT BLOCK ── */

.card .content {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 1.5rem 1.5rem 1.5rem 1.75rem;

z-index: 2;

}

/* Season badge */

.card .season-badge {

display: inline-flex;

align-items: center;

gap: 5px;

padding: 3px 10px;

border-radius: 999px;

font-size: 9px;

letter-spacing: 0.18em;

text-transform: uppercase;

font-weight: 600;

margin-bottom: 10px;

opacity: 0;

transform: translateY(6px);

transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;

border: 1px solid currentColor;

white-space: nowrap;

}

.card:hover .season-badge {

opacity: 1;

transform: translateY(0);

}

.card[data-season="spring"] .season-badge {

color: var(--spring);

border-color: rgba(74, 222, 128, 0.4);

background: rgba(74, 222, 128, 0.12);

}

.card[data-season="summer"] .season-badge {

color: var(--secondary);

border-color: rgba(246, 166, 35, 0.4);

background: rgba(246, 166, 35, 0.12);

}

.card[data-season="autumn"] .season-badge {

color: var(--autumn);

border-color: rgba(224, 123, 57, 0.4);

background: rgba(224, 123, 57, 0.12);

}

.card[data-season="winter"] .season-badge {

color: var(--winter);

border-color: rgba(96, 165, 250, 0.4);

background: rgba(96, 165, 250, 0.12);

}

/* Season label */

.card .season-label {

font-size: 10px;

letter-spacing: 0.18em;

text-transform: uppercase;

font-weight: 500;

margin-bottom: 5px;

opacity: 0.65;

transition: opacity 0.4s ease;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.card:hover .season-label {

opacity: 1;

}

.card[data-season="spring"] .season-label {

color: var(--spring);

}

.card[data-season="summer"] .season-label {

color: var(--secondary);

}

.card[data-season="autumn"] .season-label {

color: var(--autumn);

}

.card[data-season="winter"] .season-label {

color: var(--winter);

}

/* Title */

.card .title {

font-size: clamp(1.4rem, 2.5vw, 2.1rem);

font-weight: 600;

color: var(--white);

line-height: 1.1;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* Subtitle */

.card .subtitle {

font-size: 11px;

color: #fff;

margin-top: 4px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* Divider */

.card .divider {

width: 0;

height: 1px;

background: rgba(255, 255, 255, 0.18);

margin: 12px 0;

transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;

}

.card:hover .divider {

width: 100%;

}

/* Description */

.card .description {

font-size: 13.5px;

color: rgba(255, 255, 255, 0.80);

line-height: 1.7;

max-height: 0;

overflow: hidden;

opacity: 0;

transform: translateY(10px);

transition:

max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,

opacity 0.4s ease 0.18s,

transform 0.4s ease 0.18s;

}

.card .description * {
font-size: inherit !important;
color: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
text-align: left !important;
word-spacing: normal !important;
}

.card:hover .description {

max-height: 130px;

opacity: 1;

transform: translateY(0);

}

/* Explore link */

.card .explore {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: 11px;

letter-spacing: 0.12em;

text-transform: uppercase;

font-weight: 600;

margin-top: 14px;

opacity: 0;

transform: translateY(8px);

transition: opacity 0.35s ease 0.28s, transform 0.35s ease 0.28s;

text-decoration: none;

}

.card.active .explore {

opacity: 1;

transform: translateY(0);

}

.card[data-season="spring"] .explore {

color: var(--spring);

}

.card[data-season="summer"] .explore {

color: var(--secondary);

}

.card[data-season="autumn"] .explore {

color: var(--autumn);

}

.card[data-season="winter"] .explore {

color: var(--winter);

}

.explore svg {

width: 14px;

height: 14px;

transition: transform 0.25s ease;

}

.explore:hover svg {

transform: translateX(4px);

}

/* ── MOBILE & TABLET (RESPONSIVE CARDS) ── */

@media (max-width: 991px) {

.cards {

display: flex;

flex-direction: column;

height: auto;

gap: 16px;

background: transparent;

box-shadow: none;

border-radius: 0;

overflow: visible;

}

.card {

flex: none !important;

position: relative;

width: 100% !important;

height: 260px !important;

border-radius: 18px !important;

overflow: hidden;

box-shadow: var(--shadow-md);

margin: 0;

transform: none !important;

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:first-child,

.card:last-child {

border-radius: 18px !important;

}

.card:hover,

.card:active {

box-shadow: var(--shadow-xl);

}

.card .content {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 1.25rem 1.25rem 1.25rem 1.5rem;

z-index: 2;

}

.card .season-badge {

display: inline-flex !important;

opacity: 1 !important;

transform: none !important;

margin-bottom: 6px;

font-size: 9.5px;

letter-spacing: 0.14em;

}

.card .title {

font-size: 1.35rem !important;

white-space: normal !important;

line-height: 1.25 !important;

margin-bottom: 2px;

color: var(--white);

}

.card .subtitle {

font-size: 11.5px !important;

white-space: normal !important;

line-height: 1.35 !important;

color: rgba(255, 255, 255, 0.9);

margin-top: 2px;

margin-bottom: 4px;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

}

.card .divider {

width: 48px !important;

margin: 6px 0 !important;

background: rgba(255, 255, 255, 0.35);

}

.card .description {

display: none !important;

}

.card .explore {

display: inline-flex !important;

opacity: 1 !important;

transform: none !important;

margin-top: 6px !important;

font-size: 11px !important;

font-weight: 700 !important;

letter-spacing: 0.12em;

}

.card .side-accent {

width: 4px !important;

height: 100% !important;

}

.card .accent {

width: 100% !important;

height: 3px !important;

}

}

@media (max-width: 480px) {

.card {

height: 240px !important;

border-radius: 16px !important;

}

.card:first-child,

.card:last-child {

border-radius: 16px !important;

}

.card .content {

padding: 1rem 1rem 1rem 1.25rem !important;

}

.card .title {

font-size: 1.2rem !important;

}

.card .subtitle {

font-size: 11px !important;

}

}

/* ============================================================

BENEFITS SECTION - PREMIUM 3D FLIP CARDS

============================================================ */

.benefits-list {

perspective: 1200px;

display: flex;

flex-direction: column;

gap: 20px;

}

.benefit-item-flip {

width: 100%;

height: 87px;

perspective: 1200px;

cursor: pointer;

background-color: transparent;

}

.benefit-item-inner {

position: relative;

width: 100%;

height: 100%;

text-align: left;

transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);

transform-style: preserve-3d;

}

.benefit-item-flip:hover .benefit-item-inner {

transform: rotateX(180deg);

}

.benefit-item-front,

.benefit-item-back {

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border-radius: 16px;

display: flex;

align-items: center;

padding: 0 24px;

box-shadow: 0 4px 16px rgba(30, 27, 75, 0.04);

border: 1px solid rgba(255, 255, 255, 0.65);

transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}

.benefit-item-flip:hover .benefit-item-front {

border-color: rgba(29, 78, 216, 0.25);

box-shadow: 0 12px 30px rgba(29, 78, 216, 0.12);

}

.benefit-item-front {

background: rgba(255, 255, 255, 0.75);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

color: var(--navy);

gap: 20px;

}

.benefit-item-front .icon-box {

width: 54px;

height: 54px;

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

flex-shrink: 0;

transition: transform 0.4s ease;

}

.benefit-item-flip:hover .benefit-item-front .icon-box {

transform: scale(1.1) rotate(5deg);

}

.benefit-item-front h4 {

margin: 0;

font-size: 19px;

font-weight: 700;

color: var(--navy);

letter-spacing: -0.3px;

}

.benefit-item-back {

background: linear-gradient(135deg, var(--navy) 0%, #0F172A 100%);

color: white;

transform: rotateX(180deg);

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: var(--shadow-lg);

}

.benefit-item-back p {

margin: 0;

font-size: 15px;

line-height: 1.6;

color: rgba(255, 255, 255, 0.9);

font-weight: 400;

}

/* Responsive */

@media (max-width: 768px) {

.benefit-item-flip {

height: 130px;

}

.benefit-item-front {

padding: 0 16px;

}

.benefit-item-front h4 {

font-size: 17px;

}

.benefit-item-back p {

font-size: 14px;

}

}

/* ============================================================

PREMIUM FOOTER - MICROLAN

============================================================ */

/* Keyframes */

@keyframes ft-orb-float {

0%,

100% {

transform: translateY(0) scale(1);

}

50% {

transform: translateY(-30px) scale(1.06);

}

}

@keyframes ft-heart-beat {

0%,

100% {

transform: scale(1);

}

50% {

transform: scale(1.35);

}

}

@keyframes ft-slide-up {

from {

opacity: 0;

transform: translateY(28px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes ft-shimmer {

0% {

background-position: -400px 0;

}

100% {

background-position: 400px 0;

}

}

/* Root footer */

.site-footer {

position: relative;

background: linear-gradient(160deg, #0b1629 0%, #0f1e40 45%, #0b1629 100%);

overflow: hidden;

padding: 0;

margin-top: 0;

}

/* Animated background orbs */

.ft-orb {

position: absolute;

border-radius: 50%;

pointer-events: none;

filter: blur(70px);

z-index: 0;

}

.ft-orb-1 {

width: 420px;

height: 420px;

background: radial-gradient(circle, rgba(29, 78, 216, 0.22) 0%, transparent 70%);

top: -100px;

left: -80px;

animation: ft-orb-float 9s ease-in-out infinite;

}

.ft-orb-2 {

width: 360px;

height: 360px;

background: radial-gradient(circle, rgba(96, 165, 250, 0.20) 0%, transparent 70%);

bottom: -60px;

right: -60px;

animation: ft-orb-float 12s ease-in-out 2s infinite;

}

/* Subtle grid pattern */

.ft-grid-lines {

position: absolute;

inset: 0;

background-image:

linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),

linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

background-size: 60px 60px;

z-index: 0;

pointer-events: none;

}

/* Inner content */

.ft-inner {

position: relative;

z-index: 1;

max-width: 1450px;

margin: 0 auto;

padding: 40px 32px 2px;

}

/* ── NEWSLETTER ── */

.ft-newsletter {

display: flex;

align-items: center;

justify-content: space-between;

gap: 32px;

background: rgba(255, 255, 255, 0.04);

border: 1px solid rgba(255, 255, 255, 0.09);

border-radius: 20px;

padding: 32px 36px;

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

margin-bottom: 52px;

flex-wrap: wrap;

}

.ft-nl-badge {

display: inline-block;

padding: 4px 14px;

background: rgba(29, 78, 216, 0.18);

border: 1px solid rgba(29, 78, 216, 0.35);

border-radius: 999px;

color: var(--orange);

font-size: 11px;

font-weight: 700;

letter-spacing: 0.12em;

text-transform: uppercase;

margin-bottom: 10px;

}

.ft-nl-title {

font-size: clamp(1.1rem, 2.5vw, 1.5rem);

font-weight: 700;

color: #fff;

line-height: 1.3;

margin: 0;

max-width: 380px;

}

.ft-nl-right {

flex-shrink: 0;

min-width: 300px;

}

.ft-nl-form {

display: flex;

gap: 0;

border-radius: 12px;

overflow: hidden;

border: 1px solid rgba(255, 255, 255, 0.14);

background: rgba(255, 255, 255, 0.06);

}

.ft-nl-input {

flex: 1;

background: transparent;

border: none;

outline: none;

padding: 14px 18px;

font-size: 14px;

color: #fff;

min-width: 0;

}

.ft-nl-input::placeholder {

color: rgba(255, 255, 255, 0.38);

}

.ft-nl-btn {

display: flex;

align-items: center;

gap: 8px;

background: var(--primary);

color: #fff;

border: none;

padding: 14px 22px;

font-size: 13.5px;

font-weight: 700;

cursor: pointer;

white-space: nowrap;

transition: background 0.2s ease, transform 0.15s ease;

flex-shrink: 0;

}

.ft-nl-btn:hover {

background: var(--navy);

transform: none;

}

.ft-nl-btn i {

font-size: 12px;

transition: transform 0.2s ease;

}

.ft-nl-btn:hover i {

transform: translateX(3px) translateY(-2px);

}

.ft-nl-note {

margin: 10px 0 0;

font-size: 11.5px;

color: rgba(255, 255, 255, 0.35);

display: flex;

align-items: center;

gap: 5px;

}

/* ── DIVIDER LINE ── */

.ft-divider-line {

height: 1px;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 30%, rgba(96, 165, 250, 0.35) 50%, rgba(255, 255, 255, 0.10) 70%, transparent);

}

/* ── MAIN COLUMNS ── */

.ft-cols {

display: grid;

grid-template-columns: 1.8fr 1.2fr 1.5fr 1fr 1.5fr;

gap: 48px;

margin-bottom: 52px;

}

/* Brand col */

.ft-logo {

display: inline-flex;

align-items: center;

gap: 10px;

text-decoration: none;

margin-bottom: 18px;

}

.ft-logo-img {

height: 76px;

border-radius: 10px;

object-fit: contain;

background: #fff;

padding: 4px;

}

.ft-logo-txt {

font-size: 22px;

font-weight: 700;

color: #fff;

letter-spacing: -0.5px;

}

.ft-logo-txt span {

color: var(--orange);

}

.ft-brand-desc {

font-size: 13.5px;

line-height: 1.75;

color: rgba(255, 255, 255, 0.48);

margin-bottom: 22px;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

}

/* Stats */

.ft-stats {

display: flex;

align-items: center;

gap: 0;

background: rgba(255, 255, 255, 0.04);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 14px;

padding: 16px 20px;

margin-bottom: 22px;

}

.ft-stat {

display: flex;

flex-direction: column;

align-items: center;

flex: 1;

}

.ft-stat-num {

font-size: 1.5rem;

font-weight: 700;

color: #fff;

line-height: 1;

}

.ft-stat-lbl {

font-size: 10px;

font-weight: 600;

color: rgba(255, 255, 255, 0.4);

text-transform: uppercase;

letter-spacing: 0.08em;

margin-top: 4px;

}

.ft-stat-sep {

width: 1px;

height: 30px;

background: rgba(255, 255, 255, 0.1);

flex-shrink: 0;

}

/* Social icons */

.ft-social {

display: flex;

gap: 10px;

}

.ft-soc-link {

width: 38px;

height: 38px;

border-radius: 10px;

border: 1px solid rgba(255, 255, 255, 0.12);

background: rgba(255, 255, 255, 0.05);

display: flex;

align-items: center;

justify-content: center;

color: rgba(255, 255, 255, 0.55);

font-size: 14px;

text-decoration: none;

transition: all 0.22s ease;

}

.ft-soc-link:hover {

background: var(--primary);

border-color: var(--primary);

color: #fff;

transform: translateY(-3px);

box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);

}

/* Column headers */

.ft-col-title {

display: flex;

align-items: center;

gap: 10px;

font-size: 13px;

font-weight: 700;

color: #fff;

text-transform: uppercase;

letter-spacing: 0.1em;

margin-bottom: 22px;

}

.ft-col-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--orange);

flex-shrink: 0;

box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);

}

/* Footer links */

.ft-links {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-direction: column;

gap: 4px;

}

.ft-links li a {

display: flex;

align-items: center;

gap: 10px;

font-size: 13.5px;

color: rgba(255, 255, 255, 0.5);

text-decoration: none;

padding: 6px 0;

transition: all 0.2s ease;

border-radius: 6px;

}

.ft-links li a i {

font-size: 10px;

color: var(--orange2);

transition: transform 0.2s ease;

flex-shrink: 0;

}

.ft-links li a:hover {

color: #fff;

padding-left: 4px;

}

.ft-links li a:hover i {

transform: translateX(4px);

}

/* Contact items */

.ft-contact-items {

display: flex;

flex-direction: column;

gap: 18px;

}

.ft-ci {

display: flex;

align-items: flex-start;

gap: 14px;

}

.ft-ci-icon {

width: 36px;

height: 36px;

border-radius: 10px;

background: rgba(29, 78, 216, 0.12);

border: 1px solid rgba(29, 78, 216, 0.2);

display: flex;

align-items: center;

justify-content: center;

color: var(--orange);

font-size: 13px;

flex-shrink: 0;

transition: all 0.22s ease;

}

.ft-ci:hover .ft-ci-icon {

background: var(--primary);

border-color: var(--primary);

color: #fff;

transform: scale(1.1);

}

.ft-ci-info {

display: flex;

flex-direction: column;

gap: 3px;

}

.ft-ci-info strong {

font-size: 10px;

font-weight: 700;

color: rgba(255, 255, 255, 0.35);

text-transform: uppercase;

letter-spacing: 0.09em;

}

.ft-ci-info span,

.ft-ci-info a {

font-size: 13px;

color: rgba(255, 255, 255, 0.65);

text-decoration: none;

line-height: 1.5;

transition: color 0.2s ease;

}

.ft-ci-info a:hover {

color: var(--orange);

}

/* ── BOTTOM BAR ── */

.ft-bottom {

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

gap: 16px;

padding: 10px;

}

.ft-copy {

font-size: 13px;

color: rgba(255, 255, 255, 0.35);

margin: 0;

}

.ft-copy strong {

color: rgba(255, 255, 255, 0.6);

font-weight: 600;

}

.ft-bottom-links {

display: flex;

gap: 6px;

flex-wrap: wrap;

}

.ft-bottom-links a {

font-size: 12px;

color: rgba(255, 255, 255, 0.35);

text-decoration: none;

padding: 4px 10px;

border-radius: 6px;

border: 1px solid rgba(255, 255, 255, 0.07);

transition: all 0.18s ease;

white-space: nowrap;

}

.ft-bottom-links a:hover {

color: #fff;

border-color: rgba(255, 255, 255, 0.18);

background: rgba(255, 255, 255, 0.06);

}

.ft-made {

display: flex;

align-items: center;

gap: 5px;

font-size: 12.5px;

color: rgba(255, 255, 255, 0.35);

}

.ft-heart {

color: #ef4444;

font-size: 11px;

animation: ft-heart-beat 1.4s ease-in-out infinite;

}

.ft-flag {

width: 18px;

height: 13px;

border-radius: 2px;

object-fit: cover;

}

/* ── BACK TO TOP ── */

#btt {

position: fixed;

bottom: 30px;

right: 30px;

width: 48px;

height: 48px;

border-radius: 14px;

background: var(--navy);

color: #fff;

border: 1px solid rgba(255, 255, 255, 0.12);

cursor: pointer;

display: none;

align-items: center;

justify-content: center;

font-size: 15px;

box-shadow: 0 8px 28px rgba(30, 27, 75, 0.35);

transition: all 0.22s ease;

z-index: 999;

}

#btt:hover {

background: var(--primary);

border-color: var(--primary);

transform: translateY(-3px);

box-shadow: 0 12px 30px rgba(29, 78, 216, 0.4);

}

#btt.show {

display: flex;

animation: ft-slide-up 0.35s ease forwards;

}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {

.ft-cols {

grid-template-columns: 1fr 1fr;

gap: 36px;

}

.ft-brand-col {

grid-column: 1 / -1;

}

}

@media (max-width: 768px) {

.ft-inner {

padding: 44px 20px 24px;

}

.ft-newsletter {

flex-direction: column;

padding: 24px 20px;

gap: 20px;

}

.ft-nl-title {

max-width: 100%;

}

.ft-nl-right {

width: 100%;

min-width: unset;

}

.ft-nl-form {

flex-direction: column;

border-radius: 12px;

}

.ft-nl-input {

padding: 13px 16px;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.ft-nl-btn {

justify-content: center;

padding: 13px;

border-radius: 0;

}

.ft-cols {

grid-template-columns: 1fr 1fr;

gap: 28px;

}

.ft-brand-col {

grid-column: 1 / -1;

}

.ft-bottom {

flex-direction: column;

align-items: flex-start;

gap: 14px;

}

.ft-made {

align-self: flex-start;

}

}

@media (max-width: 480px) {

.ft-cols {

grid-template-columns: 1fr;

gap: 28px;

}

.ft-stats {

padding: 12px 16px;

}

.ft-stat-num {

font-size: 1.25rem;

}

.ft-bottom-links {

gap: 4px;

}

.ft-bottom-links a {

font-size: 11px;

padding: 4px 8px;

}

#btt {

bottom: 20px;

right: 20px;

width: 42px;

height: 42px;

}

}

/* ── Back-to-top scroll trigger (JS) ── */

/* Handled in main.js — shows .show class when scrollY > 400 */

/* end */

/* ── GRID ── */

.feature-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 24px;

margin: 0 auto;

max-width: 1400px;

width: 100%;

}

@media (max-width: 900px) {

.feature-grid {

grid-template-columns: repeat(2, 1fr);

}

}

@media (max-width: 560px) {

.feature-grid {

grid-template-columns: 1fr;

gap: 16px;

}

}

/* ── CARD ── */

.feature-card {

position: relative;

background: var(--white);

border-radius: 20px;

border: 1px solid var(--border);

box-shadow: var(--shadow-md);

padding: 2rem 1.75rem 1.75rem;

text-align: center;

overflow: hidden;

cursor: pointer;

display: flex;

flex-direction: column;

align-items: center;

/* entrance animation state */

opacity: 0;

transform: translateY(32px);

transition:

transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),

box-shadow 0.38s ease,

border-color 0.38s ease;

}

/* entrance: triggered by .is-visible class */

.feature-card.is-visible {

animation: cardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

/* hover lift & category glow shadow */

.feature-card:hover {

transform: translateY(-6px);

}

.feature-card[data-color="primary"]:hover {

box-shadow: 0 20px 40px rgba(29, 78, 216, 0.22);

border-color: rgba(29, 78, 216, 0.25);

}

.feature-card[data-color="secondary"]:hover {

box-shadow: 0 20px 40px rgba(37, 99, 235, 0.22);

border-color: rgba(37, 99, 235, 0.25);

}

.feature-card[data-color="navy"]:hover {

box-shadow: 0 20px 40px rgba(30, 27, 75, 0.22);

border-color: rgba(30, 27, 75, 0.25);

}

.feature-card[data-color="spring"]:hover {

box-shadow: 0 20px 40px rgba(6, 182, 212, 0.22);

border-color: rgba(6, 182, 212, 0.25);

}

.feature-card[data-color="autumn"]:hover {

box-shadow: 0 20px 40px rgba(139, 92, 246, 0.22);

border-color: rgba(139, 92, 246, 0.25);

}

.feature-card[data-color="winter"]:hover {

box-shadow: 0 20px 40px rgba(14, 165, 233, 0.22);

border-color: rgba(14, 165, 233, 0.25);

}

/* top glow blob */

.feature-card::before {

content: '';

position: absolute;

top: -40%;

left: 50%;

transform: translateX(-50%);

width: 70%;

height: 70%;

border-radius: 50%;

filter: blur(40px);

opacity: 0.13;

transition: opacity 0.4s ease;

z-index: 0;

pointer-events: none;

}

.feature-card:hover::before {

opacity: 0.22;

}

/* per-card glow color */

.feature-card[data-color="primary"] ::before,

.feature-card[data-color="primary"]::before {

background: var(--primary);

}

.feature-card[data-color="secondary"] ::before,

.feature-card[data-color="secondary"]::before {

background: var(--secondary);

}

.feature-card[data-color="navy"] ::before,

.feature-card[data-color="navy"]::before {

background: var(--navy);

}

.feature-card[data-color="spring"] ::before,

.feature-card[data-color="spring"]::before {

background: var(--spring);

}

.feature-card[data-color="autumn"] ::before,

.feature-card[data-color="autumn"]::before {

background: var(--autumn);

}

.feature-card[data-color="winter"] ::before,

.feature-card[data-color="winter"]::before {

background: var(--winter);

}

/* top accent line */

.feature-card .feature-top-line {

position: absolute;

top: 0;

left: 0;

right: 0;

height: 3px;

border-radius: 20px 20px 0 0;

transform: scaleX(0);

transform-origin: left;

transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}

.feature-card:hover .feature-top-line {

transform: scaleX(1);

}

.feature-card[data-color="primary"] .feature-top-line {

background: var(--primary);

}

.feature-card[data-color="secondary"] .feature-top-line {

background: var(--secondary);

}

.feature-card[data-color="navy"] .feature-top-line {

background: var(--navy);

}

.feature-card[data-color="spring"] .feature-top-line {

background: var(--spring);

}

.feature-card[data-color="autumn"] .feature-top-line {

background: var(--autumn);

}

.feature-card[data-color="winter"] .feature-top-line {

background: var(--winter);

}

/* ── IMAGE ── */

.feature-card .feature-img-wrap {

position: relative;

z-index: 1;

width: 100%;

border-radius: 12px;

overflow: hidden;

margin-bottom: 1.4rem;

background: var(--sl100);

aspect-ratio: 4/3;

/* image entrance */

opacity: 0;

transform: scale(0.92);

transition:

opacity 0.55s ease,

transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

}

.feature-card.is-visible .feature-img-wrap {

opacity: 1;

transform: scale(1);

/* delay matches stagger */

transition-delay: 0.15s;

}

.feature-card .feature-img-wrap img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

}

.feature-card:hover .feature-img-wrap img {

transform: scale(1.06);

}

/* image overlay tint on hover */

.feature-card .feature-img-wrap::after {

content: '';

position: absolute;

inset: 0;

border-radius: 12px;

opacity: 0;

transition: opacity 0.4s ease;

}

.feature-card:hover .feature-img-wrap::after {

opacity: 0.10;

}

.feature-card[data-color="primary"] .feature-img-wrap::after {

background: var(--primary);

}

.feature-card[data-color="secondary"] .feature-img-wrap::after {

background: var(--secondary);

}

.feature-card[data-color="navy"] .feature-img-wrap::after {

background: var(--navy);

}

.feature-card[data-color="spring"] .feature-img-wrap::after {

background: var(--spring);

}

.feature-card[data-color="autumn"] .feature-img-wrap::after {

background: var(--autumn);

}

.feature-card[data-color="winter"] .feature-img-wrap::after {

background: var(--winter);

}

/* ── TEXT CONTENT ── */

.feature-card .feature-card-body {

position: relative;

z-index: 1;

width: 100%;

}

/* each text child entrance */

.feature-card .feature-card-tag,

.feature-card .feature-card-title,

.feature-card .feature-card-desc,

.feature-card .feature-card-btn {

opacity: 0;

transform: translateY(14px);

transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

}

.feature-card.is-visible .feature-card-tag {

opacity: 1;

transform: translateY(0);

transition-delay: 0.22s;

}

.feature-card.is-visible .feature-card-title {

opacity: 1;

transform: translateY(0);

transition-delay: 0.30s;

}

.feature-card.is-visible .feature-card-desc {

opacity: 1;

transform: translateY(0);

transition-delay: 0.38s;

}

.feature-card.is-visible .feature-card-btn {

opacity: 1;

transform: translateY(0);

transition-delay: 0.46s;

}

.feature-card .feature-card-tag {

display: inline-block;

padding: 3px 11px;

border-radius: 999px;

font-size: 10px;

font-weight: 600;

letter-spacing: 0.13em;

text-transform: uppercase;

margin-bottom: 10px;

border: 1px solid currentColor;

}

.feature-card[data-color="primary"] .feature-card-tag {

color: var(--primary);

background: rgba(29, 78, 216, 0.07);

}

.feature-card[data-color="secondary"] .feature-card-tag {

color: var(--secondary);

background: rgba(37, 99, 235, 0.09);

}

.feature-card[data-color="navy"] .feature-card-tag {

color: var(--navy);

background: rgba(32, 65, 132, 0.07);

}

.feature-card[data-color="spring"] .feature-card-tag {

color: #16a34a;

background: rgba(74, 222, 128, 0.09);

border-color: rgba(74, 222, 128, 0.4);

}

.feature-card[data-color="autumn"] .feature-card-tag {

color: var(--autumn);

background: rgba(224, 123, 57, 0.09);

}

.feature-card[data-color="winter"] .feature-card-tag {

color: #2563eb;

background: rgba(96, 165, 250, 0.09);

border-color: rgba(96, 165, 250, 0.4);

}

.feature-card .feature-card-title {

font-size: clamp(1.1rem, 2vw, 1.35rem);

font-weight: 700;

color: var(--sl800);

letter-spacing: -0.01em;

line-height: 1.25;

margin-bottom: 5px;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

height: calc(1.25em * 2);

}

.feature-card .feature-card-desc {

font-size: 0.875rem;

color: var(--gray);

line-height: 1.7;

margin-bottom: 1.4rem;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

height: calc(1.7em * 3);

}

/* ── BUTTON ── */

.feature-card .feature-card-btn {

display: inline-flex;

align-items: center;

gap: 7px;

padding: 10px 22px;

border-radius: 10px;

font-size: 13px;

font-weight: 600;

border: none;

cursor: pointer;

text-decoration: none;

transition:

background 0.25s ease,

transform 0.22s ease,

box-shadow 0.25s ease;

letter-spacing: 0.01em;

color: var(--white);

}

.feature-card .feature-card-btn:hover {

transform: translateY(-2px);

box-shadow: var(--shadow-md);

}

.feature-card .feature-card-btn:active {

transform: translateY(0);

}

.feature-card .feature-card-btn svg {

width: 15px;

height: 15px;

transition: transform 0.22s ease;

flex-shrink: 0;

}

.feature-card .feature-card-btn:hover svg {

transform: translateX(3px);

}

.feature-card[data-color="primary"] .feature-card-btn {

background: var(--primary);

}

.feature-card[data-color="primary"] .feature-card-btn:hover {

background: var(--navy);

}

.feature-card[data-color="secondary"] .feature-card-btn {

background: var(--secondary);

color: var(--white);

}

.feature-card[data-color="secondary"] .feature-card-btn:hover {

background: var(--primary);

}

.feature-card[data-color="navy"] .feature-card-btn {

background: var(--blue);

}

.feature-card[data-color="navy"] .feature-card-btn:hover {

background: #183270;

}

.feature-card[data-color="spring"] .feature-card-btn {

background: var(--blue);

}

.feature-card[data-color="spring"] .feature-card-btn:hover {

background: var(--blue);

}

.feature-card[data-color="autumn"] .feature-card-btn {

background: var(--blue);

}

.feature-card[data-color="autumn"] .feature-card-btn:hover {

background: var(--blue);

}

.feature-card[data-color="winter"] .feature-card-btn {

background: var(--blue);

}

.feature-card[data-color="winter"] .feature-card-btn:hover {

background: var(--blue);

}

/* ── ANIMATIONS ── */

@keyframes fadeUp {

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes cardEntrance {

to {

opacity: 1;

transform: translateY(0);

}

}

/* =========================================================================

CRM PRODUCT PAGE SPECIFIC CSS

========================================================================= */

.crm-hero {
position: relative;
padding: 140px 0 80px;
background: linear-gradient(180deg, var(--sl50) 0%, white 100%);
overflow: hidden;
}

.crm-hero  
.sw-hero .hero-title,
.hw-hero .hero-title,
.product-hero .hero-title {
font-family: 'Poppins', sans-serif !important;
font-size: var(--text-h1) !important;
font-weight: var(--text-h1-weight) !important;
line-height: var(--text-h1-lh) !important;
margin-bottom: 20px !important;
letter-spacing: var(--text-h1-ls) !important;
 
}
 

.crm-hero .hero-desc,
.sw-hero .hero-desc,
.hw-hero .hero-desc,
.product-hero .hero-desc {
font-family: 'Poppins', sans-serif !important;
font-size: var(--text-hero-desc) !important;
font-weight: var(--text-hero-desc-weight) !important;
color: var(--text-lead-color) !important;
max-width: 600px;
margin-bottom: 2.5rem;
line-height: var(--text-hero-desc-lh) !important;
text-align: left !important;
}

.crm-hero .hero-desc *,
.sw-hero .hero-desc *,
.hw-hero .hero-desc *,
.product-hero .hero-desc * {
font-family: 'Poppins', sans-serif !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-align: left !important;
}

.crm-hero .hero-desc p,
.sw-hero .hero-desc p,
.hw-hero .hero-desc p,
.product-hero .hero-desc p {
font-family: 'Poppins', sans-serif !important;
font-size: 1.25rem !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: #64748b !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: left !important;
display: inline !important;
}

.crm-hero .hero-desc p + p,
.sw-hero .hero-desc p + p,
.hw-hero .hero-desc p + p,
.product-hero .hero-desc p + p {
display: block !important;
margin-top: 12px !important;
}

.crm-hero .hero-desc span,
.crm-hero .hero-desc div,
.crm-hero .hero-desc font,
.sw-hero .hero-desc span,
.sw-hero .hero-desc div,
.sw-hero .hero-desc font {
font-family: 'Poppins', sans-serif !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
}

.product-card .text-muted,
.product-card .text-muted * {
font-family: 'Poppins', sans-serif !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: #64748b !important;
}

.product-card .text-muted p {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: inline !important;
}

.product-card .text-muted p + p {
display: block !important;
margin-top: 6px !important;
}

.crm-feature-card h4 {
font-family: 'Poppins', sans-serif !important;
font-weight: 700 !important;
}

.crm-feature-card p,
.crm-feature-card p *,
.crm-feature-card .text-muted {
font-family: 'Poppins', sans-serif !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: #64748b !important;
}

.crm-mockup {

border-radius: 16px;

box-shadow: var(--shadow-xl);

transform: rotateY(-5deg) rotateX(2deg);

transition: transform 0.5s ease;

border: 1px solid rgba(255, 255, 255, 0.5);

background: white;

}

.crm-mockup-wrapper {

perspective: 1000px;

}

.crm-mockup-wrapper:hover .crm-mockup {

transform: rotateY(0deg) rotateX(0deg);

}

.crm-floating-widget {

position: absolute;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.8);

border-radius: 12px;

padding: 1rem;

box-shadow: var(--shadow-lg);

display: flex;

align-items: center;

gap: 15px;

animation: float 4s ease-in-out infinite;

z-index: 2;

}

@media (max-width: 991px) {

.crm-floating-widget {

display: none;

}

}

.crm-feature-card {

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(10px);

border: 1px solid rgba(30, 27, 75, 0.05);

border-radius: 20px;

padding: 2.5rem;

height: 100%;

transition: all 0.4s ease;

}

.crm-feature-card:hover {

transform: translateY(-8px);

box-shadow: var(--shadow-lg);

background: white;

border-color: rgba(29, 78, 216, 0.1);

}

.crm-icon-box {

width: 60px;

height: 60px;

border-radius: 14px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.8rem;

margin-bottom: 1.5rem;

background: var(--sl100);

color: var(--primary);

transition: all 0.3s ease;

}

.crm-feature-card:hover .crm-icon-box {

background: var(--primary);

color: white;

transform: scale(1.1) rotate(5deg);

}

.crm-price-card {

background: white;

border-radius: 24px;

padding: 3rem 2rem;

border: 1px solid var(--border);

transition: all 0.4s ease;

position: relative;

overflow: hidden;

height: 100%;

}

.crm-price-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow-xl);

border-color: var(--sl300);

}

.crm-price-card.popular {

border: 2px solid var(--primary);

box-shadow: var(--shadow-lg);

}

.crm-price-card.popular::before {

content: 'Most Popular';

position: absolute;

top: 20px;

right: -35px;

background: var(--primary);

color: white;

padding: 5px 40px;

font-size: 0.8rem;

font-weight: 700;

transform: rotate(45deg);

}

.crm-integration-logo {

width: 100px;

height: 100px;

background: white;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: var(--shadow-sm);

transition: all 0.3s ease;

border: 1px solid var(--sl100);

font-size: 3rem;

color: var(--gray);

}

.crm-integration-logo:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-md);

color: var(--primary);

}

.crm-security-box {

padding: 2rem;

border-radius: 16px;

background: var(--sl50);

text-align: center;

transition: all 0.3s ease;

border: 1px solid transparent;

}

.crm-security-box:hover {

background: white;

border-color: var(--sl200);

transform: translateY(-5px);

box-shadow: var(--shadow-md);

}

.crm-timeline {

position: relative;

padding-left: 30px;

}

.crm-timeline::before {

content: '';

position: absolute;

left: 0;

top: 0;

bottom: 0;

width: 2px;

background: var(--sl200);

}

/* =========================================================================

HOW IT WORKS VERTICAL TABS

========================================================================= */

.hiw-section {

background-image: radial-gradient(var(--sl200) 1px, transparent 1px);

background-size: 30px 30px;

background-color: var(--white);

position: relative;

}

.hiw-nav-container {

background: var(--white);

border-radius: 20px;

padding: 1.5rem;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);

border: 1px solid var(--sl100);

}

.hiw-nav-link {

display: flex;

align-items: center;

padding: 1.25rem 1.5rem;

border-radius: 16px;

color: var(--gray);

text-decoration: none;

transition: all 0.3s ease;

border: 1px solid transparent;

margin-bottom: 0.5rem;

cursor: pointer;

}

.hiw-nav-link:hover {

background: var(--sl50);

}

.hiw-nav-link.active {

background: var(--sl50);

border: 1px solid var(--sl200);

}

.hiw-step-num {

width: 45px;

height: 45px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-weight: 700;

font-size: 1rem;

border: 1px solid var(--sl200);

margin-right: 1.5rem;

color: var(--gray);

flex-shrink: 0;

transition: all 0.3s ease;

}

.hiw-nav-link.active .hiw-step-num {

border-color: var(--primary);

color: var(--primary);

background: white;

}

.hiw-step-text {

flex-grow: 1;

}

.hiw-step-text h6 {

font-weight: 700;

color: var(--navy);

margin-bottom: 0.2rem;

transition: all 0.3s ease;

}

.hiw-step-text p {

font-size: 0.85rem;

margin-bottom: 0;

opacity: 0.8;

}

.hiw-nav-arrow {

margin-left: 1rem;

width: 30px;

height: 30px;

border-radius: 50%;

background: var(--sl200);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 0.8rem;

opacity: 0;

transform: translateX(-10px);

transition: all 0.3s ease;

}

.hiw-nav-link.active .hiw-nav-arrow {

opacity: 1;

transform: translateX(0);

}

/* Tab Content */

.hiw-content-container {

background: white;

border-radius: 20px;

padding: 3.5rem;

border: 1px solid var(--sl200);

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);

position: relative;

overflow: hidden;

height: 100%;

display: flex;

flex-direction: column;

}

.hiw-watermark {

position: absolute;

top: 25px;

right: 20px;

font-size: 5rem;

font-weight: 900;

color: var(--sl50);

line-height: 1;

z-index: 0;

user-select: none;

}

.hiw-content-inner {

position: relative;

z-index: 1;

flex-grow: 1;

}

.hiw-icon-box {

width: 60px;

height: 60px;

border-radius: 14px;

background: var(--sl50);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.8rem;

margin-bottom: 2rem;

border: 1px solid var(--sl100);

}

.hiw-title {

font-size: 2.25rem;

font-weight: 700;

color: var(--navy);

margin-bottom: 1.5rem;

}

.hiw-meaning-pill {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 2rem;

flex-wrap: wrap;

}

.hiw-meaning-label {

font-size: 0.75rem;

font-weight: 700;

letter-spacing: 2px;

color: var(--gray);

text-transform: uppercase;

}

.hiw-meaning-line {

width: 30px;

height: 1px;

background: var(--sl300);

}

.hiw-meaning-desc {

background: var(--sl50);

color: var(--primary);

padding: 0.4rem 1.25rem;

border-radius: 20px;

font-size: 0.85rem;

font-weight: 600;

}

.hiw-desc {

font-size: 1.15rem;

color: var(--gray);

line-height: 1.7;

margin-bottom: 3rem;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.text-muted {

font-size: 16px;

}

/* Footer Nav */

.hiw-footer {

display: flex;

align-items: center;

justify-content: space-between;

margin-top: auto;

border-top: 1px solid var(--sl100);

padding-top: 2rem;

position: relative;

z-index: 1;

}

.hiw-dots {

display: flex;

align-items: center;

gap: 10px;

}

.hiw-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--sl200);

cursor: pointer;

transition: all 0.3s ease;

}

.hiw-dot:hover {

background: var(--sl300);

}

.hiw-dot.active {

width: 24px;

border-radius: 4px;

background: var(--primary);

}

.hiw-progress-text {

font-size: 0.85rem;

font-weight: 700;

color: var(--gray);

margin-left: 1rem;

}

.btn-hiw-next {

background: var(--sl50);

color: var(--primary);

border: 1px solid var(--sl200);

padding: 0.6rem 1.8rem;

border-radius: 20px;

font-weight: 700;

font-size: 0.95rem;

display: flex;

align-items: center;

gap: 8px;

transition: all 0.3s ease;

}

.btn-hiw-next:hover {

background: var(--primary);

color: white;

border-color: var(--primary);

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(29, 78, 216, 0.2);

}

@media (max-width: 991px) {

.hiw-content-container {

padding: 2rem;

}

.hiw-watermark {

font-size: 8rem;

}

}

/* Markets We Power Cards */

.crm-market-card {

cursor: pointer;

}

.crm-market-overlay {

opacity: 0;

visibility: hidden;

transform: translateY(10px);

transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.crm-market-card:hover .crm-market-overlay {

opacity: 1;

visibility: visible;

transform: translateY(0);

}

/* =========================================================================

PARTNER PAGE SPECIFIC CSS

========================================================================= */

:root {

--p-primary: var(--primary, #1D4ED8);

--p-primary-hover: #1e40af;

--p-secondary: var(--secondary, #2563EB);

--p-accent: #3B82F6;

--p-accent-rgb: 59, 130, 246;

--p-dark-navy: #0F172A;

--p-navy-deep: #070B14;

--p-slate-light: #F8FAFC;

--p-slate-medium: #E2E8F0;

--p-slate-dark: #64748B;

--p-body-text: #334155;

--p-glass-bg: rgba(255, 255, 255, 0.03);

--p-glass-border: rgba(255, 255, 255, 0.08);

--p-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);

--p-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

--p-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.15);

--p-card-glow: 0 15px 35px rgba(29, 78, 216, 0.12);

--p-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.partner-sec-dark {

background-color: var(--p-dark-navy);

color: #F8FAFC;

position: relative;

overflow: hidden;

}

.partner-sec-light {

background-color: #FFFFFF;

color: var(--p-body-text);

position: relative;

}

.partner-sec-slate {

background-color: var(--p-slate-light);

color: var(--p-body-text);

position: relative;

}

.partner-title-light {

color: #FFFFFF !important;

font-weight: 700;

line-height: 1.25;

}

.partner-title-dark {

color: var(--p-dark-navy) !important;

font-weight: 700;

line-height: 1.25;

}

.partner-sub-label {

font-size: 0.9rem;

color: var(--p-accent);

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

display: block;

margin-bottom: 8px;

}

.p-btn-primary {

background: linear-gradient(135deg, var(--p-primary), var(--p-secondary));

color: #FFFFFF !important;

border: none;

border-radius: 50px;

padding: 14px 32px;

font-weight: 600;

font-size: 0.95rem;

box-shadow: 0 8px 24px rgba(29, 78, 216, 0.3);

transition: var(--p-transition);

display: inline-flex;
justify-content: center;
align-items: center;

gap: 10px;

}

.p-btn-primary:hover {

transform: translateY(-3px);

box-shadow: 0 15px 30px rgba(29, 78, 216, 0.45);

}

.p-btn-outline {

border: 2px solid rgba(255, 255, 255, 0.2);

color: #FFFFFF !important;

background: transparent;

border-radius: 50px;

padding: 12px 30px;

font-weight: 600;

font-size: 0.95rem;

transition: var(--p-transition);

display: inline-flex;

align-items: center;

gap: 10px;

}

.p-btn-outline:hover {

border-color: #FFFFFF;

background: rgba(255, 255, 255, 0.05);

transform: translateY(-3px);

}

.p-btn-outline-dark {

border: 2px solid var(--p-primary);

color: var(--p-primary) !important;

background: transparent;

border-radius: 50px;

padding: 12px 30px;

font-weight: 600;

font-size: 0.95rem;

transition: var(--p-transition);

display: inline-flex;

align-items: center;

gap: 10px;

}

.p-btn-outline-dark:hover {

border-color: var(--p-primary);

background: rgba(29, 78, 216, 0.05);

transform: translateY(-3px);

color: var(--p-primary) !important;

}

/* 1. HERO SECTION */

.partner-hero {

padding: 140px 0 100px;

background: radial-gradient(circle at 80% 20%, rgba(29, 78, 216, 0.08), transparent 45%),

radial-gradient(circle at 15% 85%, rgba(37, 99, 235, 0.05), transparent 45%),

#FFFFFF;

min-height: 95vh;

display: flex;

align-items: center;

border-bottom: 1px solid var(--p-slate-medium);

}

.p-hero-badge {

background: rgba(29, 78, 216, 0.06);

border: 1px solid rgba(29, 78, 216, 0.15);

color: var(--p-primary);

padding: 6px 18px;

border-radius: 50px;

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 1.5px;

display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 25px;

}

.p-hero-badge-dot {

width: 8px;

height: 8px;

background-color: var(--p-primary);

border-radius: 50%;

box-shadow: 0 0 10px var(--p-primary);

animation: p-pulse-dot 1.8s infinite;

}

@keyframes p-pulse-dot {

0%,

100% {

transform: scale(0.9);

opacity: 0.6;

}

50% {

transform: scale(1.3);

opacity: 1;

}

}

.p-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

margin-bottom: 22px;

}

.p-hero-desc {

color: var(--p-slate-dark);

font-size: var(--text-hero-desc) !important;

line-height: 1.8;

margin-bottom: 35px;

max-width: 540px;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.p-hero-art-container {

position: relative;

height: 520px;

display: flex;

align-items: center;

justify-content: center;

}

.p-hero-svg-bg {

width: 100%;

height: 100%;

opacity: 0.85;

animation: p-spin-slow 60s linear infinite;

}

.p-hero-center-img-wrap {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 270px;

height: 270px;

border-radius: 50%;

background: #ffffff;

padding: 6px;

border: 4px solid #3B82F6;

box-shadow: 0 10px 30px rgba(29, 78, 216, 0.25);

z-index: 10;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

transition: all 0.3s ease;

}

.p-hero-center-img-wrap:hover {

transform: translate(-50%, -50%) scale(1.08);

border-color: var(--secondary);

box-shadow: 0 15px 35px rgba(29, 78, 216, 0.4);

}

.p-hero-center-img {

width: 100%;

height: 100%;

 

border-radius: 50%;

}

@keyframes p-spin-slow {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

.p-float-card {

position: absolute;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(14px);

border: 1.5px solid var(--p-slate-medium);

border-radius: 16px;

padding: 16px 20px;

display: flex;

align-items: center;

gap: 12px;

box-shadow: var(--p-shadow-md);

z-index: 5;

transition: transform 0.3s ease, border-color 0.3s;

}

.p-float-card:hover {

transform: scale(1.05) translateY(-5px);

border-color: var(--p-accent);

}

.p-float-icon {

width: 42px;

height: 42px;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

}

.p-float-icon.blue {

background: rgba(59, 130, 246, 0.1);

color: #3B82F6;

}

.p-float-icon.green {

background: rgba(16, 185, 129, 0.1);

color: #10B981;

}

.p-float-icon.purple {

background: rgba(139, 92, 246, 0.1);

color: #8B5CF6;

}

.p-float-num {

font-weight: 700;

font-size: 1rem;

color: var(--p-dark-navy);

line-height: 1.2;

}

.p-float-lbl {

font-size: 0.72rem;

color: var(--p-slate-dark);

text-transform: uppercase;

letter-spacing: 0.5px;

}

.p-fc-1 {

top: 10%;

left: 0;

animation: p-widget-float-1 8s ease-in-out infinite;

}

.p-fc-2 {

bottom: -2%;

right: 60%;

animation: p-widget-float-2 9s ease-in-out infinite;

}

.p-fc-3 {

top: 43%;

right: -13%;

animation: p-widget-float-3 7s ease-in-out infinite;

}

@keyframes p-widget-float-1 {

0%,

100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-15px) rotate(1deg);

}

}

@keyframes p-widget-float-2 {

0%,

100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-20px) rotate(-1.5deg);

}

}

@keyframes p-widget-float-3 {

0%,

100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-10px) rotate(2deg);

}

}

/* 2. LOGO SHOWCASE MARQUEE */

.partner-marquee-sec {

background: var(--p-slate-light);

padding: 40px 0;

border-top: 1px solid var(--p-slate-medium);

border-bottom: 1px solid var(--p-slate-medium);

overflow: hidden;

}

.p-marquee-wrap {

display: flex;

overflow: hidden;

user-select: none;

position: relative;

}

.p-marquee-track {

display: flex;

gap: 5px;

width: max-content;

animation: p-marquee-slide 90s linear infinite;

}

.p-marquee-item {

display: flex;

align-items: center;

gap: 10px;

color: rgba(148, 163, 184, 0.7);

font-size: 1.6rem;

font-weight: 700;

letter-spacing: 0.5px;

transition: color 0.3s;

width: 100%;

min-width: 318px;

}

.p-marquee-item:hover {

color: var(--p-primary);

}

.p-marquee-item i {

font-size: 2rem;

}

@keyframes p-marquee-slide {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-50%);

}

}

/* 3. WHY PARTNER WITH US SECTION */

.p-why-card {

background: #FFFFFF;

border: 1px solid var(--p-slate-medium);

border-radius: 20px;

padding: 35px 30px;

transition: var(--p-transition);

height: 100%;

box-shadow: var(--p-shadow-sm);

}

.p-why-card:hover {

transform: translateY(-8px);

box-shadow: var(--p-shadow-lg);

border-color: rgba(29, 78, 216, 0.15);

}

.p-why-icon-box {

width: 55px;

height: 55px;

border-radius: 12px;

background: rgba(29, 78, 216, 0.06);

color: var(--p-primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

margin-bottom: 22px;

transition: var(--p-transition);

}

.p-why-card:hover .p-why-icon-box {

background: var(--p-primary);

color: #FFFFFF;

transform: rotateY(180deg);

}

/* 4. PARTNER CATEGORIES SECTION */

.p-cat-card {

background: #FFFFFF;

border: 1.5px solid var(--p-slate-medium);

border-radius: 24px;

padding: 40px 32px;

transition: var(--p-transition);

height: 100%;

position: relative;

z-index: 1;

overflow: hidden;

box-shadow: var(--p-shadow-sm);

}

.p-cat-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(180deg, rgba(29, 78, 216, 0.04) 0%, transparent 100%);

opacity: 0;

transition: opacity 0.4s ease;

z-index: -1;

}

.p-cat-card:hover {

border-color: rgba(37, 99, 235, 0.3);

transform: translateY(-8px);

box-shadow: var(--p-shadow-lg);

}

.p-cat-card:hover::before {

opacity: 1;

}

.p-cat-icon {

font-size: 2.5rem;

color: var(--p-primary);

margin-bottom: 25px;

display: inline-block;

transition: var(--p-transition);

}

.p-cat-card:hover .p-cat-icon {

transform: scale(1.15) rotate(5deg);

}

.p-cat-list {

list-style: none;

padding-left: 0;

margin-top: 20px;

}

.p-cat-list li {

margin-bottom: 12px;

font-size: 0.9rem;

color: var(--p-body-text);

display: flex;

align-items: center;

gap: 10px;

}

.p-cat-list li i {

color: #10B981;

font-size: 0.95rem;

}

/* 5. STATISTICS STRIP */

.partner-stats-sec {

background: linear-gradient(135deg, var(--p-primary), var(--p-navy-deep));

color: #FFFFFF;

padding: 70px 0;

position: relative;

z-index: 2;

}

.p-stat-box {

text-align: center;

}

.p-stat-num {

font-size: clamp(2.2rem, 4.5vw, 2.7rem);

font-weight: 700;

line-height: 1.1;

margin-bottom: 8px;

font-family: 'Poppins', sans-serif;

}

.p-stat-lbl {

font-size: 0.85rem;

color: rgba(255, 255, 255, 0.7);

text-transform: uppercase;

letter-spacing: 1.5px;

}

/* 6. ONBOARDING JOURNEY TIMELINE */

.partner-onboarding-sec {

background-color: #F8FAFC;

padding: 100px 0;

position: relative;

border-top: 1px solid var(--p-slate-medium);

border-bottom: 1px solid var(--p-slate-medium);

}

.p-onboarding-badge {

background: rgba(37, 99, 235, 0.06);

border: 1px solid rgba(37, 99, 235, 0.15);

color: var(--p-primary);

padding: 6px 18px;

border-radius: 50px;

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 1.5px;

display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 25px;

}

.p-onboarding-badge .p-badge-dot {

width: 8px;

height: 8px;

background-color: var(--p-primary);

border-radius: 50%;

box-shadow: 0 0 10px var(--p-primary);

animation: p-pulse-dot 1.8s infinite;

}

.p-onboarding-title {

font-size: clamp(2.2rem, 4.5vw, 2.7rem);

font-weight: 700;

color: var(--p-dark-navy) !important;

margin-bottom: 50px;

}

.p-journey-container {

position: relative;

padding: 7px 0;

margin: 0 auto;

}

.p-journey-timeline {

position: relative;

display: flex;

justify-content: space-between;

align-items: flex-start;

width: 100%;

}

.p-journey-line-bg {

position: absolute;

top: 35px;

left: 8.33%;

right: 8.33%;

height: 4px;

background-color: var(--p-slate-medium);

z-index: 1;

border-radius: 2px;

}

.p-journey-line-fill {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 60%;

background: linear-gradient(90deg, #2563EB, #3B82F6);

border-radius: 2px;

transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.p-journey-step {

position: relative;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

width: 16.66%;

z-index: 2;

cursor: pointer;

transition: var(--p-transition);

}

.p-journey-step-card {

position: absolute;

top: -10px;

bottom: -52px;

left: 5%;

right: 5%;

margin: -30px;

background: transparent;

border-radius: 16px;

z-index: -1;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

opacity: 0;

border: 1px solid transparent;

}

.p-step-circle {

width: 70px;

height: 70px;

border-radius: 50%;

background-color: #FFFFFF;

border: 3px solid var(--p-slate-medium);

color: var(--p-slate-dark);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

position: relative;

z-index: 3;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

box-shadow: var(--p-shadow-sm);

}

.p-journey-step:hover .p-step-circle {

border-color: #3B82F6;

color: #3B82F6;

transform: scale(1.05);

}

.p-journey-step.completed .p-step-circle,

.p-journey-step.active .p-step-circle {

background: #2563EB;

border-color: #2563EB;

color: #FFFFFF;

box-shadow: 0 0 25px rgba(37, 99, 235, 0.35);

}

.p-journey-step.active .p-step-circle {

background: #2563EB;

border-color: #2563EB;

box-shadow: 0 0 35px rgba(37, 99, 235, 0.5);

animation: p-step-pulse 2s infinite;

}

@keyframes p-step-pulse {

0%,

100% {

box-shadow: 0 0 25px rgba(37, 99, 235, 0.35);

}

50% {

box-shadow: 0 0 40px rgba(37, 99, 235, 0.6);

}

}

.p-step-glow {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 120px;

height: 120px;

background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);

z-index: -1;

opacity: 0;

transition: opacity 0.4s ease;

border-radius: 50%;

}

.p-journey-step.completed .p-step-glow,

.p-journey-step.active .p-step-glow {

opacity: 1;

}

.p-step-label-container {

margin-top: 25px;

padding: 0 10px;

transition: all 0.3s ease;

}

.p-step-number {

font-size: 0.8rem;

font-weight: 700;

color: var(--p-slate-dark);

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 4px;

transition: color 0.3s;

}

.p-journey-step.completed .p-step-number,

.p-journey-step.active .p-step-number {

color: #2563EB;

}

.p-step-title {

font-size: 0.95rem;

font-weight: 700;

color: #1E293B;

margin-bottom: 0;

line-height: 1.3;

}

.p-journey-step.active .p-step-title {

color: #0F172A;

}

.p-step-desc {

font-size: 0.8rem;

color: var(--p-body-text);

margin-top: 10px;

margin-bottom: 0;

line-height: 1.5;

opacity: 0;

max-height: 0;

overflow: hidden;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.p-journey-step.active .p-step-desc {

opacity: 1;

max-height: 140px;

margin-top: 10px;

}

/* 7. PARTNERSHIP BENEFITS */

.p-benefit-item {

background: #FFFFFF;

border-left: 4px solid var(--p-primary);

padding: 20px 24px;

border-radius: 0 16px 16px 0;

box-shadow: var(--p-shadow-sm);

margin-bottom: 20px;

transition: var(--p-transition);

}

.p-benefit-item:hover {

transform: translateX(8px);

box-shadow: var(--p-shadow-md);

border-left-color: var(--p-accent);

}

/* 8. TESTIMONIALS SLIDER */

.partner-testimonials-swiper {

padding: 30px 10px 60px 10px;

}

.p-test-card {

background: #FFFFFF;

border: 1px solid var(--p-slate-medium);

border-radius: 22px;

padding: 40px 32px;

box-shadow: var(--p-shadow-sm);

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

position: relative;

}

.p-test-quote {

font-size: 1rem;

font-style: italic;

color: var(--p-body-text);

line-height: 1.7;

margin-bottom: 25px;

position: relative;

}

.p-test-quote::before {

content: "\201C";

font-size: 4rem;

color: rgba(29, 78, 216, 0.08);

position: absolute;

top: -30px;

left: -15px;

}

.p-test-author {

display: flex;

align-items: center;

gap: 15px;

border-top: 1px solid var(--p-slate-medium);

padding-top: 20px;

}

.p-test-img {

width: 50px;

height: 50px;

border-radius: 50%;

object-fit: cover;

border: 2px solid var(--p-primary);

}

.p-test-name {

font-weight: 700;

color: var(--p-dark-navy);

margin-bottom: 2px;

font-size: 0.95rem;

}

.p-test-role {

font-size: 0.78rem;

color: var(--p-slate-dark);

}

/* 9. PARTNER REGISTRATION FORM */

.partner-form-sec {

background: radial-gradient(circle at 10% 10%, rgba(29, 78, 216, 0.05), transparent 45%),

var(--p-slate-light);

color: var(--p-body-text);

position: relative;

border-top: 1px solid var(--p-slate-medium);

}

.p-form-panel {

background: #FFFFFF;

border: 1px solid var(--p-slate-medium);

border-radius: 28px;

padding: 50px 40px;

box-shadow: var(--p-shadow-lg);

position: relative;

z-index: 5;

color: var(--p-body-text);

}

.p-form-input {

background: #FFFFFF !important;

border: 1.5px solid var(--p-slate-medium) !important;

border-radius: 12px !important;

color: var(--p-body-text) !important;

padding: 14px 16px !important;

font-size: 0.95rem !important;

transition: var(--p-transition) !important;

}

.p-form-input:focus {

background: #FFFFFF !important;

border-color: var(--p-accent) !important;

box-shadow: 0 0 10px rgba(59, 130, 246, 0.15) !important;

outline: none !important;

}

.p-form-input::placeholder {

color: #94A3B8 !important;

}

.p-form-label {

font-size: 0.85rem;

color: var(--p-slate-dark);

font-weight: 500;

margin-bottom: 8px;

display: block;

letter-spacing: 0.5px;

}

.p-form-select {

cursor: pointer;

}

.p-form-select option {

background-color: #FFFFFF;

color: var(--p-body-text);

}

.p-checkbox-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

gap: 12px;

margin-top: 8px;

}

.p-checkbox-item {

display: flex;

align-items: center;

gap: 10px;

cursor: pointer;

padding: 8px 12px;

background: #F8FAFC;

border: 1px solid var(--p-slate-medium);

border-radius: 8px;

transition: var(--p-transition);

user-select: none;

}

.p-checkbox-item:hover {

background: #F1F5F9;

border-color: var(--p-accent);

}

.p-checkbox-item input {

cursor: pointer;

accent-color: var(--p-accent);

width: 16px;

height: 16px;

}

.p-checkbox-label {

font-size: 0.82rem;

color: var(--p-body-text);

margin-bottom: 0;

}

.p-upload-zone {

border: 2px dashed var(--p-slate-medium);

background: #F8FAFC;

border-radius: 14px;

padding: 30px 20px;

text-align: center;

cursor: pointer;

transition: var(--p-transition);

}

.p-upload-zone:hover,

.p-upload-zone.dragover {

border-color: var(--p-accent);

background: rgba(29, 78, 216, 0.03);

}

.p-upload-icon {

font-size: 2.2rem;

color: rgba(148, 163, 184, 0.7);

margin-bottom: 12px;

transition: color 0.3s;

}

.p-upload-zone:hover .p-upload-icon {

color: var(--p-accent);

}

.p-upload-text {

font-size: 0.88rem;

color: var(--p-body-text);

margin-bottom: 4px;

}

.p-upload-subtext {

font-size: 0.76rem;

color: var(--p-slate-dark);

}

.p-uploaded-file-container {

display: none;

align-items: center;

justify-content: space-between;

background: #E6F4EA;

border: 1px solid #A8DAB5;

border-radius: 10px;

padding: 10px 16px;

margin-top: 12px;

animation: p-fade-in 0.3s ease;

}

@keyframes p-fade-in {

from {

opacity: 0;

transform: translateY(5px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

.p-uploaded-file-info {

display: flex;

align-items: center;

gap: 10px;

color: #137333;

font-size: 0.88rem;

}

.p-uploaded-file-remove {

color: #D93025;

cursor: pointer;

font-size: 1.1rem;

transition: transform 0.2s;

}

.p-uploaded-file-remove:hover {

transform: scale(1.15);

}

.p-success-panel {

display: none;

text-align: center;

padding: 40px 20px;

animation: p-zoom-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes p-zoom-in {

from {

opacity: 0;

transform: scale(0.9);

}

to {

opacity: 1;

transform: scale(1);

}

}

.p-success-badge {

width: 80px;

height: 80px;

border-radius: 50%;

background: rgba(16, 185, 129, 0.1);

border: 2px solid #10B981;

color: #10B981;

display: inline-flex;

align-items: center;

justify-content: center;

font-size: 2.2rem;

margin-bottom: 25px;

box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);

}

/* Sticky Sidebar for Registration Form */

@media (min-width: 992px) {

.p-form-info-sticky {

position: sticky;

top: 120px;

align-self: start;

}

}

/* 10. FAQ ACCORDION SECTION */

.partner-faq-sec {

background-color: var(--p-slate-light);

}

.p-faq-accordion .accordion-item {

border: 1px solid var(--p-slate-medium) !important;

border-radius: 16px !important;

margin-bottom: 15px;

overflow: hidden;

box-shadow: var(--p-shadow-sm);

background: #FFFFFF;

transition: var(--p-transition);

}

.p-faq-accordion .accordion-item:hover {

box-shadow: var(--p-shadow-md);

border-color: rgba(29, 78, 216, 0.15) !important;

}

.p-faq-accordion .accordion-button {

padding: 20px 25px;

font-weight: 600;

color: var(--p-dark-navy);

background: #FFFFFF;

box-shadow: none !important;

font-size: 1.05rem;

}

.p-faq-accordion .accordion-button:not(.collapsed) {

color: var(--p-primary);

border-bottom: 1px solid var(--p-slate-medium);

}

.p-faq-accordion .accordion-body {

padding: 20px 25px;

color: var(--p-body-text);

line-height: 1.7;

font-size: 0.95rem;

}

/* 11. CALL TO ACTION SECTION */

.partner-cta-sec {

background: radial-gradient(circle at center, rgba(37, 99, 235, 0.12), transparent 60%),

var(--p-navy-deep);

padding: 100px 0;

border-top: 1px solid rgba(255, 255, 255, 0.05);

}

.p-cta-glow {

box-shadow: 0 0 50px rgba(59, 130, 246, 0.15);

}

.p-fade-up-anim {

opacity: 0;

transform: translateY(20px);

transition: all 0.6s ease;

}

.p-fade-up-anim.aos-animate {

opacity: 1;

transform: translateY(0);

}

/* =========================================================================

RESPONSIVE DESIGN MEDIA QUERIES

========================================================================= */

@media (max-width: 1199px) {

.p-journey-step-card {

bottom: -180px;

}

}

@media (max-width: 991px) {

.partner-hero {

padding: 100px 0 60px;

min-height: auto;

}

.p-hero-art-container {

height: 380px;

margin-top: 40px;

}

.p-hero-center-img-wrap {

width: 120px;

height: 120px;

border-width: 3px;

}

.p-fc-1 {

left: 5%;

top: 5%;

}

.p-fc-2 {

right: 95;

bottom: 7%;

}

.p-fc-3 {

right: 5%;

top: 3%;

}

/* Journey Responsive */

.p-journey-timeline {

flex-direction: column;

align-items: stretch;

padding-left: 40px;

}

.p-journey-line-bg {

top: 0;

bottom: 0;

left: 35px;

width: 4px;

height: auto;

}

.p-journey-line-fill {

width: 100% !important;

height: 60%;

/* Updated dynamically via JS */

left: 0;

top: 0;

}

.p-journey-step {

width: 100%;

flex-direction: row;

text-align: left;

align-items: flex-start;

padding: 20px 0;

}

.p-journey-step-card {

top: 0;

bottom: 0;

left: 60px;

right: 0;

opacity: 0;

}

.p-step-label-container {

margin-top: 5px;

padding-left: 20px;

flex: 1;

text-align: left;

}

.p-step-desc {

max-height: 0;

}

.p-journey-step.active .p-step-desc {

max-height: 150px;

}

.p-step-glow {

width: 100px;

height: 100px;

}

}

@media (max-width: 767px) {

.p-hero-desc {

font-size: 1rem;

margin-bottom: 25px;

}

.p-btn-primary,

.p-btn-outline-dark {

padding: 12px 25px;

font-size: 0.9rem;

}

.p-journey-container {

padding: 20px 0;

}

.p-form-panel {

padding: 30px 20px;

}

.p-checkbox-grid {

grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

}

.p-faq-accordion .accordion-button {

padding: 15px 20px;

font-size: 0.95rem;

}

}

@media (max-width: 575px) {

.p-float-card {

padding: 8px 12px;

border-radius: 12px;

}

.p-float-icon {

width: 32px;

height: 32px;

font-size: 1rem;

}

.p-float-num {

font-size: 0.85rem;

}

.p-float-lbl {

font-size: 0.62rem;

}

.p-hero-art-container {

height: 320px;

}

.p-hero-center-img-wrap {

width: 95px;

height: 95px;

border-width: 2px;

padding: 4px;

}

.p-journey-timeline {

padding-left: 20px;

}

.p-journey-line-bg {

left: 20px;

}

.p-step-circle {

width: 44px;

height: 44px;

font-size: 1.1rem;

border-width: 2px;

}

.p-journey-step-card {

left: 35px;

}

.p-step-label-container {

padding-left: 15px;

}

.p-step-title {

font-size: 0.88rem;

}

.p-step-number {

font-size: 0.75rem;

}

.p-step-desc {

font-size: 0.78rem;

}

}

/* =========================================================================

CAREER PAGE SPECIFIC CSS

========================================================================= */

:root {

--c-primary: var(--primary, #1D4ED8);

--c-primary-hover: #1e40af;

--c-secondary: var(--secondary, #2563EB);

--c-accent: #3B82F6;

--c-accent-rgb: 59, 130, 246;

--c-dark-navy: #0F172A;

--c-navy-deep: #070B14;

--c-slate-light: #F8FAFC;

--c-slate-medium: #E2E8F0;

--c-slate-dark: #64748B;

--c-body-text: #334155;

--c-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

--c-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);

--c-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

--c-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

}

.career-hero {

padding: 140px 0 100px;

background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.07), transparent 45%),

radial-gradient(circle at 15% 85%, rgba(6, 182, 212, 0.05), transparent 45%),

#FFFFFF;

min-height: 90vh;

display: flex;

align-items: center;

border-bottom: 1px solid var(--c-slate-medium);

}

.c-hero-badge {

background: rgba(29, 78, 216, 0.06);

border: 1px solid rgba(29, 78, 216, 0.15);

color: var(--c-primary);

padding: 6px 18px;

border-radius: 50px;

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 1.5px;

display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 25px;

}

.c-hero-badge-dot {

width: 8px;

height: 8px;

background-color: var(--c-primary);

border-radius: 50%;

box-shadow: 0 0 10px var(--c-primary);

animation: c-pulse-dot 1.8s infinite;

}

@keyframes c-pulse-dot {

0%,

100% {

transform: scale(0.9);

opacity: 0.6;

}

50% {

transform: scale(1.3);

opacity: 1;

}

}

.c-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

color: var(--c-dark-navy) !important;

line-height: 1.2;

margin-bottom: 22px;

}

.c-hero-desc {

color: var(--c-slate-dark);

font-size: var(--text-hero-desc) !important;

line-height: 1.8;

margin-bottom: 35px;

max-width: 550px;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.c-hero-art-container {

position: relative;

height: 480px;

display: flex;

align-items: center;

justify-content: center;

}

.c-hero-svg-bg {

width: 100%;

height: 100%;

opacity: 0.9;

animation: c-spin-slow 70s linear infinite;

}

.c-hero-center-img-wrap {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 270px;

height: 270px;

border-radius: 50%;

background: #ffffff;

padding: 6px;

border: 4px solid #3B82F6;

box-shadow: 0 10px 30px rgba(29, 78, 216, 0.25);

z-index: 10;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

transition: all 0.3s ease;

}

.c-hero-center-img-wrap:hover {

transform: translate(-50%, -50%) scale(1.08);

border-color: var(--secondary);

box-shadow: 0 15px 35px rgba(29, 78, 216, 0.4);

}

.c-hero-center-img {

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 50%;

}

@media (max-width: 991px) {

.c-hero-center-img-wrap {

width: 120px;

height: 120px;

border-width: 3px;

}

}

@media (max-width: 575px) {

.c-hero-center-img-wrap {

width: 95px;

height: 95px;

border-width: 2px;

padding: 4px;

}

}

@keyframes c-spin-slow {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

.c-float-card {

position: absolute;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(14px);

border: 1.5px solid var(--c-slate-medium);

border-radius: 16px;

padding: 16px 20px;

display: flex;

align-items: center;

gap: 12px;

box-shadow: var(--c-shadow-md);

z-index: 5;

transition: transform 0.3s ease, border-color 0.3s;

}

.c-float-card:hover {

transform: scale(1.05) translateY(-5px);

border-color: var(--c-primary);

}

.c-float-icon {

width: 40px;

height: 40px;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

}

.c-float-icon.blue {

background: rgba(59, 130, 246, 0.1);

color: #3B82F6;

}

.c-float-icon.green {

background: rgba(16, 185, 129, 0.1);

color: #10B981;

}

.c-float-icon.orange {

background: rgba(245, 158, 11, 0.1);

color: #F59E0B;

}

.c-float-title {

font-weight: 700;

font-size: 0.95rem;

color: var(--c-dark-navy);

line-height: 1.2;

}

.c-float-lbl {

font-size: 0.72rem;

color: var(--c-slate-dark);

}

.c-fc-1 {

top: 12%;

left: -5%;

animation: c-widget-float-1 8s ease-in-out infinite;

}

.c-fc-2 {

bottom: 1%;

right: 53%;

animation: c-widget-float-2 9s ease-in-out infinite;

}

.c-fc-3 {

top: 48%;

right: -11%;

animation: c-widget-float-3 7s ease-in-out infinite;

}

@keyframes c-widget-float-1 {

0%,

100% {

transform: translateY(0px);

}

50% {

transform: translateY(-15px);

}

}

@keyframes c-widget-float-2 {

0%,

100% {

transform: translateY(0px);

}

50% {

transform: translateY(-20px);

}

}

@keyframes c-widget-float-3 {

0%,

100% {

transform: translateY(0px);

}

50% {

transform: translateY(-12px);

}

}

/* SECTION BASICS */

.career-sec-light {

background-color: #FFFFFF;

color: var(--c-body-text);

position: relative;

}

.career-sec-slate {

background-color: var(--c-slate-light);

color: var(--c-body-text);

position: relative;

}

/* WHY WORK WITH US */

.c-why-card {

background: #FFFFFF;

border: 1.5px solid var(--c-slate-medium);

border-radius: 20px;

padding: 35px 30px;

transition: var(--c-transition);

height: 100%;

box-shadow: var(--c-shadow-sm);

}

.c-why-card:hover {

transform: translateY(-8px);

box-shadow: var(--c-shadow-lg);

border-color: rgba(29, 78, 216, 0.15);

}

.c-why-icon-box {

width: 55px;

height: 55px;

border-radius: 12px;

background: rgba(29, 78, 216, 0.06);

color: var(--c-primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

margin-bottom: 22px;

transition: var(--c-transition);

}

.c-why-card:hover .c-why-icon-box {

background: var(--c-primary);

color: #FFFFFF;

transform: rotateY(180deg);

}

/* COMPANY CULTURE */

.c-culture-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 24px;

margin-top: 30px;

}

.c-culture-card {

background: #FFFFFF;

border: 1px solid var(--c-slate-medium);

border-radius: 24px;

overflow: hidden;

box-shadow: var(--c-shadow-sm);

transition: var(--c-transition);

margin-bottom: 10px;

}

.c-culture-card:hover {

transform: translateY(-5px);

box-shadow: var(--c-shadow-md);

border-color: rgba(37, 99, 235, 0.2);

}

.c-culture-img {

height: 200px;

width: 100%;

object-fit: cover;

border-bottom: 1px solid var(--c-slate-medium);

}

.c-culture-body {

padding: 25px;

}

/* EMPLOYEE BENEFITS */

.c-benefit-card {

background: #FFFFFF;

border: 1.5px solid var(--c-slate-medium);

border-radius: 18px;

padding: 24px;

transition: var(--c-transition);

height: 100%;

display: flex;

align-items: flex-start;

gap: 16px;

box-shadow: var(--c-shadow-sm);

}

.c-benefit-card:hover {

transform: translateY(-5px);

box-shadow: var(--c-shadow-md);

border-color: rgba(29, 78, 216, 0.15);

}

.c-benefit-icon {

width: 48px;

height: 48px;

border-radius: 10px;

background: rgba(37, 99, 235, 0.06);

color: var(--c-primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.3rem;

flex-shrink: 0;

transition: var(--c-transition);

}

.c-benefit-card:hover .c-benefit-icon {

background: var(--c-primary);

color: #FFFFFF;

transform: scale(1.1);

}

/* HIRING PROCESS TIMELINE */

.c-hiring-sec {

background-color: var(--c-slate-light);

padding: 100px 0;

border-top: 1px solid var(--c-slate-medium);

border-bottom: 1px solid var(--c-slate-medium);

}

.c-hiring-badge {

background: rgba(37, 99, 235, 0.06);

border: 1px solid rgba(37, 99, 235, 0.15);

color: var(--c-primary);

padding: 6px 18px;

border-radius: 50px;

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 1.5px;

display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 25px;

}

.c-hiring-badge .c-badge-dot {

width: 8px;

height: 8px;

background-color: var(--c-primary);

border-radius: 50%;

box-shadow: 0 0 10px var(--c-primary);

animation: c-pulse-dot 1.8s infinite;

}

.c-hiring-title {

font-size: clamp(2.2rem, 4.5vw, 2.7rem);

font-weight: 700;

color: var(--c-dark-navy) !important;

margin-bottom: 50px;

}

.c-timeline-container {

position: relative;

padding: 40px 0;

margin: 0 auto;

max-width: 1100px;

}

.c-timeline {

position: relative;

display: flex;

justify-content: space-between;

align-items: flex-start;

width: 100%;

}

.c-timeline-line-bg {

position: absolute;

top: 35px;

left: 10%;

right: 10%;

height: 4px;

background-color: var(--c-slate-medium);

z-index: 1;

border-radius: 2px;

}

.c-timeline-line-fill {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 0%;

background: linear-gradient(90deg, #2563EB, #06B6D4);

border-radius: 2px;

transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.c-timeline-step {

position: relative;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

width: 20%;

z-index: 2;

cursor: pointer;

transition: var(--c-transition);

}

.c-timeline-step-card {

position: absolute;

top: -10px;

bottom: -150px;

left: 5%;

right: 5%;

background: transparent;

border-radius: 16px;

z-index: -1;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

opacity: 0;

border: 1px solid transparent;

}

.c-step-circle {

width: 70px;

height: 70px;

border-radius: 50%;

background-color: #FFFFFF;

border: 3px solid var(--c-slate-medium);

color: var(--c-slate-dark);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

position: relative;

z-index: 3;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

box-shadow: var(--c-shadow-sm);

}

.c-timeline-step:hover .c-step-circle {

border-color: #3B82F6;

color: #3B82F6;

transform: scale(1.05);

}

.c-timeline-step.completed .c-step-circle,

.c-timeline-step.active .c-step-circle {

background: #2563EB;

border-color: #2563EB;

color: #FFFFFF;

box-shadow: 0 0 25px rgba(37, 99, 235, 0.35);

}

.c-timeline-step.active .c-step-circle {

background: #2563EB;

border-color: #2563EB;

box-shadow: 0 0 35px rgba(37, 99, 235, 0.5);

animation: c-step-pulse 2s infinite;

}

@keyframes c-step-pulse {

0%,

100% {

box-shadow: 0 0 25px rgba(37, 99, 235, 0.35);

}

50% {

box-shadow: 0 0 40px rgba(37, 99, 235, 0.6);

}

}

.c-step-glow {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 120px;

height: 120px;

background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);

z-index: -1;

opacity: 0;

transition: opacity 0.4s ease;

border-radius: 50%;

}

.c-timeline-step.completed .c-step-glow,

.c-timeline-step.active .c-step-glow {

opacity: 1;

}

.c-step-label-container {

margin-top: 25px;

padding: 0 10px;

transition: all 0.3s ease;

}

.c-step-number {

font-size: 0.8rem;

font-weight: 700;

color: var(--c-slate-dark);

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 4px;

transition: color 0.3s;

}

.c-timeline-step.completed .c-step-number,

.c-timeline-step.active .c-step-number {

color: #2563EB;

}

.c-step-title {

font-size: 0.95rem;

font-weight: 700;

color: #1E293B;

margin-bottom: 0;

line-height: 1.3;

}

.c-timeline-step.active .c-step-title {

color: #0F172A;

}

.c-step-desc {

font-size: 0.8rem;

color: var(--c-body-text);

margin-top: 10px;

margin-bottom: 0;

line-height: 1.5;

opacity: 0;

max-height: 0;

overflow: hidden;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.c-timeline-step.active .c-step-desc {

opacity: 1;

max-height: 140px;

margin-top: 10px;

}

/* OPEN POSITIONS GRID */

.c-filter-wrap {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 40px;

}

.c-filter-btn {

background: #FFFFFF;

border: 1.5px solid var(--c-slate-medium);

color: var(--c-slate-dark);

padding: 8px 22px;

border-radius: 50px;

font-weight: 600;

font-size: 0.9rem;

transition: var(--c-transition);

cursor: pointer;

}

.c-filter-btn:hover {

border-color: var(--c-primary);

color: var(--c-primary);

background: rgba(29, 78, 216, 0.02);

}

.c-filter-btn.active {

background: var(--c-primary);

border-color: var(--c-primary);

color: #FFFFFF;

box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);

}

.c-job-card {

background: #FFFFFF;

border: 1.5px solid var(--c-slate-medium);

border-radius: 20px;

padding: 30px;

transition: var(--c-transition);

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

box-shadow: var(--c-shadow-sm);

}

.c-job-card:hover {

transform: translateY(-6px);

box-shadow: var(--c-shadow-lg);

border-color: rgba(29, 78, 216, 0.15);

}

.c-job-dept {

font-size: 0.72rem;

font-weight: 700;

color: var(--c-primary);

text-transform: uppercase;

letter-spacing: 1px;

background: rgba(29, 78, 216, 0.06);

padding: 4px 12px;

border-radius: 50px;

display: inline-block;

margin-bottom: 15px;

}

.c-job-meta {

display: flex;

gap: 15px;

font-size: 0.8rem;

color: var(--c-slate-dark);

margin-bottom: 20px;

}

.c-job-meta span i {

margin-right: 5px;

}

.c-job-apply-btn {

background: #F8FAFC;

border: 1.5px solid var(--c-slate-medium);

color: var(--c-dark-navy);

border-radius: 12px;

padding: 10px 20px;

font-weight: 600;

font-size: 0.88rem;

text-align: center;

display: block;

transition: var(--c-transition);

text-decoration: none !important;

cursor: pointer;

}

.c-job-card:hover .c-job-apply-btn {

background: var(--c-primary);

border-color: var(--c-primary);

color: #FFFFFF !important;

box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);

}

/* JOB APPLICATION FORM */

.career-form-sec {

background: radial-gradient(circle at 10% 10%, rgba(29, 78, 216, 0.04), transparent 45%),

var(--c-slate-light);

border-top: 1px solid var(--c-slate-medium);

}

.c-form-panel {

background: #FFFFFF;

border: 1.5px solid var(--c-slate-medium);

border-radius: 28px;

padding: 50px 40px;

box-shadow: var(--c-shadow-lg);

position: relative;

z-index: 5;

}

@media (max-width: 767px) {

.c-form-panel {

padding: 30px 20px;

}

}

.c-form-info-sticky {

position: relative;

}

@media (min-width: 992px) {

.c-form-info-sticky {

position: sticky;

top: 120px;

align-self: start;

}

}

.c-form-input {

background: #FFFFFF !important;

border: 1.5px solid var(--c-slate-medium) !important;

border-radius: 12px !important;

color: var(--c-body-text) !important;

padding: 12px 16px !important;

font-size: 0.95rem !important;

transition: var(--c-transition) !important;

}

.c-form-input:focus {

background: #FFFFFF !important;

border-color: var(--c-primary) !important;

box-shadow: 0 0 10px rgba(29, 78, 216, 0.15) !important;

outline: none !important;

}

.c-form-input::placeholder {

color: #94A3B8 !important;

}

.c-form-label {

font-size: 0.85rem;

color: var(--c-slate-dark);

font-weight: 600;

margin-bottom: 8px;

display: block;

letter-spacing: 0.5px;

}

.c-form-select {

cursor: pointer;

}

.c-form-select option {

background-color: #FFFFFF;

color: var(--c-body-text);

}

.c-upload-zone {

border: 2px dashed var(--c-slate-medium);

background: #F8FAFC;

border-radius: 14px;

padding: 25px 20px;

text-align: center;

cursor: pointer;

transition: var(--c-transition);

}

.c-upload-zone:hover,

.c-upload-zone.dragover {

border-color: var(--c-primary);

background: rgba(29, 78, 216, 0.03);

}

.c-upload-icon {

font-size: 2rem;

color: rgba(148, 163, 184, 0.7);

margin-bottom: 8px;

transition: color 0.3s;

}

.c-upload-zone:hover .c-upload-icon {

color: var(--c-primary);

}

.c-upload-text {

font-size: 0.85rem;

color: var(--c-body-text);

margin-bottom: 4px;

}

.c-upload-subtext {

font-size: 0.72rem;

color: var(--c-slate-dark);

}

.c-uploaded-file-container {

display: none;

align-items: center;

justify-content: space-between;

background: #E6F4EA;

border: 1px solid #A8DAB5;

border-radius: 10px;

padding: 10px 16px;

margin-top: 12px;

animation: c-fade-in 0.3s ease;

}

@keyframes c-fade-in {

from {

opacity: 0;

transform: translateY(5px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

.c-uploaded-file-info {

display: flex;

align-items: center;

gap: 10px;

color: #137333;

font-size: 0.85rem;

}

.c-uploaded-file-remove {

color: #D93025;

cursor: pointer;

font-size: 1.1rem;

transition: transform 0.2s;

}

.c-uploaded-file-remove:hover {

transform: scale(1.15);

}

.c-success-panel {

display: none;

text-align: center;

padding: 40px 20px;

animation: c-zoom-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes c-zoom-in {

from {

opacity: 0;

transform: scale(0.9);

}

to {

opacity: 1;

transform: scale(1);

}

}

.c-success-badge {

width: 80px;

height: 80px;

border-radius: 50%;

background: rgba(16, 185, 129, 0.1);

border: 2px solid #10B981;

color: #10B981;

display: inline-flex;

align-items: center;

justify-content: center;

font-size: 2.2rem;

margin-bottom: 25px;

box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);

}

/* RESPONSIVE TIMELINE */

@media (max-width: 991px) {

.c-timeline {

flex-direction: column;

align-items: stretch;

padding-left: 40px;

}

.c-timeline-line-bg {

top: 0;

bottom: 0;

left: 35px;

width: 4px;

height: auto;

}

.c-timeline-line-fill {

width: 100% !important;

height: 0%;

left: 0;

top: 0;

}

.c-timeline-step {

width: 100%;

flex-direction: row;

text-align: left;

align-items: flex-start;

padding: 20px 0;

}

.c-timeline-step-card {

top: 0;

bottom: 0;

left: 60px;

right: 0;

opacity: 0;

}

.c-step-label-container {

margin-top: 5px;

padding-left: 20px;

flex: 1;

text-align: left;

}

.c-step-desc {

max-height: 0;

}

.c-timeline-step.active .c-step-desc {

max-height: 150px;

}

}

@media (max-width: 575px) {

.c-timeline {

padding-left: 20px;

}

.c-timeline-line-bg {

left: 20px;

}

.c-step-circle {

width: 44px;

height: 44px;

font-size: 1.1rem;

border-width: 2px;

}

.c-timeline-step-card {

left: 35px;

}

.c-step-label-container {

padding-left: 15px;

}

.c-step-title {

font-size: 0.88rem;

}

.c-step-number {

font-size: 0.75rem;

}

.c-step-desc {

font-size: 0.78rem;

}

}

/* ============================================================
   CAREER STATEMENT & CULTURE HIGHLIGHT CARDS
   ============================================================ */
.c-statement-banner-card {
    background: #FFFFFF;
    background-image: radial-gradient(120% 80% at 50% 0%, rgba(37, 99, 235, 0.04) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 44px 36px 36px;
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    cursor: default;
}

.c-statement-banner-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: 0 22px 48px -10px rgba(29, 78, 216, 0.16), 0 10px 24px -4px rgba(15, 23, 42, 0.06) !important;
}

.c-statement-accent-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1D4ED8 0%, #3B82F6 50%, #60A5FA 100%);
    transition: height 0.3s ease;
}

.c-statement-banner-card:hover .c-statement-accent-strip {
    height: 5px;
}

.c-statement-watermark {
    position: absolute;
    right: 28px;
    bottom: 12px;
    font-size: 5.5rem;
    color: #1D4ED8;
    opacity: 0.04;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.c-statement-banner-card:hover .c-statement-watermark {
    opacity: 0.085;
    transform: scale(1.08) rotate(-4deg);
}

.c-statement-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: var(--c-primary, #1D4ED8);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.c-statement-banner-card:hover .c-statement-badge {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}

.c-statement-quote {
    color: #1E293B;
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    line-height: 1.8;
    font-weight: 500;
    margin: 0 auto;
    max-width: 860px;
    position: relative;
    z-index: 2;
}

.c-statement-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(226, 232, 240, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.c-statement-author {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748B;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 767.98px) {
    .c-statement-banner-card {
        padding: 32px 20px 24px;
        border-radius: 18px;
    }

    .c-statement-quote {
        font-size: 1rem;
        line-height: 1.65;
    }

    .c-statement-watermark {
        font-size: 3.5rem;
        right: 14px;
        bottom: 8px;
    }
}

/* =========================================================================

CLIENTS PAGE CSS

========================================================================= */

:root {

--cl-primary: #1D4ED8;

--cl-primary-hover: #1e40af;

--cl-secondary: #2563EB;

--cl-accent: #06B6D4;

--cl-navy: #0F172A;

--cl-navy-mid: #1E293B;

--cl-slate-light: #F8FAFC;

--cl-slate-mid: #E2E8F0;

--cl-slate-dark: #64748B;

--cl-body: #334155;

--cl-white: #FFFFFF;

--cl-trans: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

--cl-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);

--cl-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);

--cl-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

--cl-shadow-xl: 0 30px 80px rgba(15, 23, 42, 0.16);

}

/* ---- HERO ---- */

.cl-hero {

padding: 140px 0 100px;

min-height: 90vh;

background:

radial-gradient(ellipse at 75% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),

radial-gradient(ellipse at 20% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),

#FFFFFF;

display: flex;

align-items: center;

border-bottom: 1px solid var(--cl-slate-mid);

overflow: hidden;

position: relative;

}

.cl-hero-badge {

background: rgba(29, 78, 216, 0.06);

border: 1px solid rgba(29, 78, 216, 0.18);

color: var(--cl-primary);

padding: 6px 20px;

border-radius: 50px;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.8px;

text-transform: uppercase;

display: inline-flex;

align-items: center;

gap: 9px;

margin-bottom: 28px;

}

.cl-hero-badge-dot {

width: 8px;

height: 8px;

background: var(--cl-primary);

border-radius: 50%;

box-shadow: 0 0 10px var(--cl-primary);

animation: cl-pulse 1.8s infinite;

}

@keyframes cl-pulse {

0%,

100% {

transform: scale(0.9);

opacity: 0.6;

}

50% {

transform: scale(1.3);

opacity: 1;

}

}

.cl-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

color: var(--cl-navy) !important;

line-height: 1.18;

margin-bottom: 24px;

}

.cl-hero-desc {

font-size: 1.1rem;

color: var(--cl-slate-dark);

line-height: 1.8;

max-width: 550px;

margin-bottom: 38px;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

/* Hero art - floating logo orbit */

.cl-hero-art {

position: relative;

height: 480px;

display: flex;

align-items: center;

justify-content: center;

}

.cl-orbit-svg {

width: 100%;

height: 100%;

opacity: 0.85;

animation: cl-spin-slow 80s linear infinite;

}

@keyframes cl-spin-slow {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

.cl-hero-center-hub {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 124px;

height: 124px;

border-radius: 50%;

background: #ffffff;

padding: 0;

border: 3.5px solid #2563eb;

box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.08), 0 15px 35px rgba(29, 78, 216, 0.22);

z-index: 8;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

animation: cl-center-pulse 4s ease-in-out infinite;

}

.cl-hero-center-img {

height: 76px;

width: auto;

max-width: 82%;

object-fit: contain;

filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));

transition: transform 0.35s ease;

display: block;

}

.cl-hero-center-hub:hover {

transform: translate(-50%, -50%) scale(1.08);

box-shadow: 0 0 0 12px rgba(37, 99, 235, 0.16), 0 20px 42px rgba(29, 78, 216, 0.32);

border-color: #1d4ed8;

}

.cl-hero-center-img {

width: 100%;

height: 100%;

object-fit: contain;

filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));

transition: transform 0.35s ease;

}

.cl-hero-center-hub:hover .cl-hero-center-img {

transform: scale(1.08);

}

@keyframes cl-center-pulse {

0%,
    100% {

box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08), 0 12px 30px rgba(29, 78, 216, 0.18);

}

50% {

box-shadow: 0 0 0 14px rgba(37, 99, 235, 0.14), 0 18px 40px rgba(29, 78, 216, 0.26);

}

}

.cl-orbit-logo {

position: absolute;

width: 64px;

height: 64px;

border-radius: 16px;

background: #ffffff;

border: 1.5px solid var(--cl-slate-mid);

box-shadow: var(--cl-shadow-md);

display: flex;

align-items: center;

justify-content: center;

padding: 0;

overflow: hidden;

font-size: 1.5rem;

color: var(--cl-primary);

transition: transform 0.3s ease, box-shadow 0.3s ease;

backdrop-filter: blur(10px);

}

.cl-orbit-img {

height: 38px;

width: auto;

max-width: 85%;

object-fit: contain;

display: block;

transition: transform 0.3s ease;

}

.cl-orbit-logo:hover {

transform: scale(1.15);

box-shadow: var(--cl-shadow-lg);

border-color: var(--cl-primary);

}

.cl-ol-1 {

top: 5%;

left: 30%;

animation: cl-float-a 7s ease-in-out infinite;

}

.cl-ol-2 {

top: 20%;

right: 12%;

animation: cl-float-b 9s ease-in-out infinite;

}

.cl-ol-3 {

top: 50%;

right: 7%;

animation: cl-float-c 8s ease-in-out infinite;

}

.cl-ol-4 {

    bottom: 4%;
    right: 21%;

animation: cl-float-a 6s ease-in-out infinite 1s;

}

.cl-ol-5 {

bottom: 5%;

left: 25%;

animation: cl-float-b 10s ease-in-out infinite 0.5s;

}

.cl-ol-6 {

top: 40%;

left: 8%;

animation: cl-float-c 8s ease-in-out infinite 2s;

}

@keyframes cl-float-a {

0%,

100% {

transform: translateY(0px);

}

50% {

transform: translateY(-14px);

}

}

@keyframes cl-float-b {

0%,

100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-18px) rotate(3deg);

}

}

@keyframes cl-float-c {

0%,

100% {

transform: translateY(0px);

}

50% {

transform: translateY(-10px);

}

}

/* ---- STATS COUNTERS ---- */

.cl-stats-sec {

background: var(--cl-navy);

padding: 70px 0;

}

.cl-stat-card {

text-align: center;

padding: 20px;

border-right: 1px solid rgba(255, 255, 255, 0.08);

}

.cl-stat-card:last-child {

border-right: none;

}

.cl-stat-num {

font-size: clamp(2.4rem, 4vw, 3.2rem);

font-weight: 900;

background: linear-gradient(135deg, #60A5FA, #38BDF8);

-webkit-text-fill-color: transparent;

line-height: 1;

margin-bottom: 8px;

}

.cl-stat-label {

font-size: 0.88rem;

color: rgba(255, 255, 255, 0.6);

font-weight: 500;

letter-spacing: 0.5px;

}

.cl-stat-icon {

width: 48px;

height: 48px;

border-radius: 12px;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.1);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

color: #60A5FA;

margin: 0 auto 16px;

}

/* ---- FEATURED CLIENTS ---- */

.cl-featured-sec {

background: var(--cl-white);

padding: 100px 0;

}

.cl-section-badge {

background: rgba(29, 78, 216, 0.06);

border: 1px solid rgba(29, 78, 216, 0.15);

color: var(--cl-primary);

padding: 6px 18px;

border-radius: 50px;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.5px;

text-transform: uppercase;

display: inline-block;

margin-bottom: 20px;

}

.cl-featured-card {

background: var(--cl-white);

border: 1.5px solid var(--cl-slate-mid);

border-radius: 24px;

padding: 36px 30px;

height: 100%;

display: flex;

flex-direction: column;

transition: var(--cl-trans);

box-shadow: var(--cl-shadow-sm);

position: relative;

overflow: hidden;

}

.cl-featured-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 3px;

background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent));

transform: scaleX(0);

transition: transform 0.4s ease;

transform-origin: left;

}

.cl-featured-card:hover {

transform: translateY(-10px);

box-shadow: var(--cl-shadow-xl);

border-color: rgba(29, 78, 216, 0.2);

}

.cl-featured-card:hover::before {

transform: scaleX(1);

}

.cl-feat-logo-box {

width: 72px;

height: 72px;

border-radius: 16px;

background: rgba(29, 78, 216, 0.06);

border: 1px solid rgba(29, 78, 216, 0.1);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.8rem;

color: var(--cl-primary);

margin-bottom: 22px;

transition: var(--cl-trans);

}

.cl-featured-card:hover .cl-feat-logo-box {

background: var(--cl-primary);

color: #fff;

transform: rotateY(180deg);

}

.cl-feat-industry {

font-size: 0.72rem;

font-weight: 700;

color: var(--cl-primary);

text-transform: uppercase;

letter-spacing: 1.2px;

background: rgba(29, 78, 216, 0.06);

padding: 3px 10px;

border-radius: 50px;

display: inline-block;

margin-bottom: 14px;

}

.cl-feat-result {

margin-top: auto;

padding-top: 20px;

border-top: 1px solid var(--cl-slate-mid);

display: flex;

align-items: center;

gap: 10px;

}

.cl-feat-result-num {

font-size: 1.5rem;

font-weight: 700;

color: var(--cl-primary);

}

.cl-feat-result-lbl {

font-size: 0.8rem;

color: var(--cl-slate-dark);

line-height: 1.3;

}

/* ---- CLIENT PARTNERS & ENTERPRISE SHOWCASE (2-ROW AUTOPLAY) ---- */

.cl-clients-showcase-sec {

background: #f8fafc;

padding: 70px 0 75px;

border-top: 1px solid #e2e8f0;

border-bottom: 1px solid #e2e8f0;

position: relative;

overflow: hidden;

}

.cl-clients-showcase-sec::before {

content: '';

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 100%;

max-width: 1100px;

height: 100%;

background: radial-gradient(circle at 50% 15%, rgba(29, 78, 216, 0.05) 0%, transparent 65%);

pointer-events: none;

}

/* 2-Row Marquee Container */

.cl-dual-marquee-container {

position: relative;

overflow: hidden;

width: 100%;

display: flex;

flex-direction: column;

gap: 16px;

padding: 6px 0;

}

/* Gradient edge fades */

.cl-dual-marquee-container::before,

.cl-dual-marquee-container::after {

content: '';

position: absolute;

top: 0;

bottom: 0;

width: 120px;

z-index: 5;

pointer-events: none;

}

.cl-dual-marquee-container::before {

left: 0;

background: linear-gradient(to right, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);

}

.cl-dual-marquee-container::after {

right: 0;

background: linear-gradient(to left, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);

}

.cl-marquee-row {

display: flex;

width: 100%;

overflow: hidden;

user-select: none;

}

.cl-marquee-content {

display: flex;

flex-shrink: 0;

align-items: center;

gap: 16px;

padding-right: 16px;

will-change: transform;

}

/* Row 1 Autoplay Scroll Left */

.cl-marquee-left .cl-marquee-content {

animation: cl-marquee-scroll-left 35s linear infinite;

}

/* Row 2 Autoplay Scroll Right */

.cl-marquee-right .cl-marquee-content {

animation: cl-marquee-scroll-right 38s linear infinite;

}

/* Pause on hover */

.cl-marquee-row:hover .cl-marquee-content {

animation-play-state: paused;

}

@keyframes cl-marquee-scroll-left {

from {

transform: translateX(0);

}

to {

transform: translateX(-100%);

}

}

@keyframes cl-marquee-scroll-right {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

/* Client Card in Marquee */

.cl-brand-card {
margin: 10px;
flex: 0 0 190px;

width: 190px;

height: 92px;

background: #ffffff;

border: 1.5px solid #e2e8f0;

border-radius: 14px;

padding: 14px 18px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);

transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

cursor: pointer;

position: relative;

overflow: hidden;

}

.cl-brand-card:hover {

    margin: 10px;
border-color: #2563eb;

background: #ffffff;

transform: translateY(-4px);

box-shadow: 0 10px 25px rgba(29, 78, 216, 0.12);

}

.cl-brand-card-inner {

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.cl-brand-logo-container {

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.cl-brand-img {

max-height: 96px;

max-width: 140px;

width: auto;

height: auto;

object-fit: contain;

transition: transform 0.3s ease;

}

.cl-brand-card:hover .cl-brand-img {

transform: scale(1.08);

}

.cl-brand-icon-fallback {

font-size: 1.85rem;

color: #2563eb;

display: flex;

align-items: center;

justify-content: center;

transition: transform 0.3s ease, color 0.3s ease;

}

.cl-brand-card:hover .cl-brand-icon-fallback {

transform: scale(1.1);

color: #1d4ed8;

}

@media (max-width: 768px) {

.cl-clients-showcase-sec {

padding: 50px 0 55px;

}

.cl-dual-marquee-container {

gap: 12px;

}

.cl-brand-card {

flex: 0 0 155px;

width: 155px;

height: 78px;

padding: 10px 14px;

border-radius: 12px;

}

.cl-brand-img {

max-height: 40px;

max-width: 120px;

}

.cl-dual-marquee-container::before,

.cl-dual-marquee-container::after {

width: 50px;

}

}

/* ---- INDUSTRIES ---- */

.cl-industries-sec {

background: var(--cl-white);

padding: 100px 0;

}

.cl-industry-card {

background: var(--cl-white);

border: 1.5px solid var(--cl-slate-mid);

border-radius: 20px;

padding: 30px 24px;

height: 100%;

text-align: center;

transition: var(--cl-trans);

box-shadow: var(--cl-shadow-sm);

cursor: default;

position: relative;

overflow: hidden;

}

.cl-industry-card::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

right: 0;

height: 3px;

background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent));

transform: scaleX(0);

transition: transform 0.35s ease;

}

.cl-industry-card:hover {

transform: translateY(-8px);

border-color: rgba(29, 78, 216, 0.2);

box-shadow: var(--cl-shadow-lg);

}

.cl-industry-card:hover::after {

transform: scaleX(1);

}

.cl-industry-icon {

width: 60px;

height: 60px;

border-radius: 14px;

background: rgba(29, 78, 216, 0.06);

color: var(--cl-primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

margin: 0 auto 18px;

transition: var(--cl-trans);

}

.cl-industry-card:hover .cl-industry-icon {

background: var(--cl-primary);

color: #fff;

transform: scale(1.1) rotate(-5deg);

}

/* ---- TESTIMONIALS ---- */

.cl-testimonial-sec {

background: var(--cl-slate-light);

padding: 100px 0;

border-top: 1px solid var(--cl-slate-mid);

}

.cl-testi-card {

background: var(--cl-white);

border: 1.5px solid var(--cl-slate-mid);

border-radius: 24px;

padding: 38px 34px;

height: 100%;

display: flex;

flex-direction: column;

transition: var(--cl-trans);

box-shadow: var(--cl-shadow-sm);

position: relative;

}

.cl-testi-card::before {

content: '\201C';

position: absolute;

top: 20px;

right: 28px;

font-size: 5rem;

line-height: 1;

color: rgba(29, 78, 216, 0.08);

font-weight: 900;

}

.cl-testi-card:hover {

transform: translateY(-8px);

box-shadow: var(--cl-shadow-lg);

border-color: rgba(29, 78, 216, 0.15);

}

.cl-testi-stars {

display: flex;

gap: 4px;

margin-bottom: 18px;

}

.cl-testi-stars i {

color: #F59E0B;

font-size: 0.9rem;

}

.cl-testi-quote {

font-size: 0.97rem;

color: var(--cl-body);

line-height: 1.75;

font-style: italic;

flex: 1;

margin-bottom: 24px;

}

.cl-testi-divider {

height: 1px;

background: var(--cl-slate-mid);

margin-bottom: 20px;

}

.cl-testi-avatar {

width: 48px;

height: 48px;

border-radius: 50%;

background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));

display: flex;

align-items: center;

justify-content: center;

font-size: 1.1rem;

font-weight: 700;

color: #fff;

flex-shrink: 0;

}

.cl-testi-name {

font-weight: 700;

color: var(--cl-navy);

font-size: 0.95rem;

margin-bottom: 2px;

}

.cl-testi-role {

font-size: 0.8rem;

color: var(--cl-slate-dark);

}

.cl-testi-company-badge {

font-size: 0.72rem;

font-weight: 700;

color: var(--cl-primary);

background: rgba(29, 78, 216, 0.06);

padding: 3px 10px;

border-radius: 50px;

letter-spacing: 0.5px;

}

/* ---- ENGAGEMENT PROCESS TIMELINE ---- */

.cl-timeline-sec {

background: var(--cl-white);

padding: 100px 0;

border-top: 1px solid var(--cl-slate-mid);

}

.cl-eng-timeline {

position: relative;

max-width: 900px;

margin: 50px auto 0;

}

.cl-eng-timeline::before {

content: '';

position: absolute;

left: 40px;

top: 0;

bottom: 0;

width: 3px;

background: linear-gradient(180deg, var(--cl-primary), var(--cl-accent));

border-radius: 2px;

}

.cl-eng-step {

display: flex;

gap: 30px;

align-items: flex-start;

margin-bottom: 50px;

padding-left: 20px;

position: relative;

}

.cl-eng-step:last-child {

margin-bottom: 0;

}

.cl-eng-circle {

width: 62px;

height: 62px;

border-radius: 50%;

background: var(--cl-white);

border: 3px solid var(--cl-slate-mid);

color: var(--cl-slate-dark);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.3rem;

flex-shrink: 0;

transition: var(--cl-trans);

box-shadow: var(--cl-shadow-sm);

position: relative;

z-index: 2;

}

.cl-eng-step.is-active .cl-eng-circle,

.cl-eng-step:hover .cl-eng-circle {

background: var(--cl-primary);

border-color: var(--cl-primary);

color: #fff;

box-shadow: 0 0 30px rgba(29, 78, 216, 0.35);

transform: scale(1.08);

}

.cl-eng-body {

background: var(--cl-slate-light);

border: 1.5px solid var(--cl-slate-mid);

border-radius: 18px;

padding: 24px 28px;

flex: 1;

transition: var(--cl-trans);

}

.cl-eng-step:hover .cl-eng-body,

.cl-eng-step.is-active .cl-eng-body {

border-color: rgba(29, 78, 216, 0.2);

box-shadow: var(--cl-shadow-md);

background: #fff;

}

.cl-eng-step-num {

font-size: 0.75rem;

font-weight: 700;

color: var(--cl-primary);

text-transform: uppercase;

letter-spacing: 1.5px;

margin-bottom: 6px;

}

.cl-eng-step-title {

font-size: 1.05rem;

font-weight: 700;

color: var(--cl-navy);

margin-bottom: 8px;

}

.cl-eng-step-desc {

font-size: 0.88rem;

color: var(--cl-slate-dark);

line-height: 1.65;

margin: 0;

}

/* ---- WHY CHOOSE US ---- */

.cl-why-sec {

background: var(--cl-slate-light);

padding: 100px 0;

border-top: 1px solid var(--cl-slate-mid);

}

.cl-why-card {

background: var(--cl-white);

border: 1.5px solid var(--cl-slate-mid);

border-radius: 20px;

padding: 32px 28px;

height: 100%;

transition: var(--cl-trans);

box-shadow: var(--cl-shadow-sm);

position: relative;

overflow: hidden;

}

.cl-why-card:hover {

transform: translateY(-8px);

box-shadow: var(--cl-shadow-lg);

border-color: rgba(29, 78, 216, 0.18);

}

.cl-why-icon {

width: 56px;

height: 56px;

border-radius: 13px;

background: rgba(29, 78, 216, 0.06);

color: var(--cl-primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.45rem;

margin-bottom: 20px;

transition: var(--cl-trans);

}

.cl-why-card:hover .cl-why-icon {

background: var(--cl-primary);

color: #fff;

transform: rotateY(180deg);

}

/* ---- CTA SECTION ---- */

.cl-cta-sec {

background: linear-gradient(135deg, var(--cl-navy) 0%, var(--cl-navy-mid) 50%, #1e3a8a 100%);

padding: 100px 0;

position: relative;

overflow: hidden;

}

.cl-cta-sec::before {

content: '';

position: absolute;

top: -50%;

left: -20%;

width: 600px;

height: 600px;

background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, transparent 70%);

border-radius: 50%;

}

.cl-cta-sec::after {

content: '';

position: absolute;

bottom: -30%;

right: -10%;

width: 500px;

height: 500px;

background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);

border-radius: 50%;

}

.cl-cta-content {

position: relative;

z-index: 2;

text-align: center;

}

.cl-cta-badge {

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

color: #93C5FD;

padding: 6px 18px;

border-radius: 50px;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.5px;

text-transform: uppercase;

display: inline-block;

margin-bottom: 24px;

}

.cl-cta-title {

font-size: clamp(2rem, 4vw, 3.2rem);

font-weight: 700;

color: #fff;

margin-bottom: 20px;

line-height: 1.2;

}

.cl-cta-desc {

font-size: 1.05rem;

color: rgba(255, 255, 255, 0.7);

max-width: 580px;

margin: 0 auto 40px;

line-height: 1.8;

}

.cl-btn-primary {

background: linear-gradient(135deg, var(--cl-primary), #1e40af);
width: 100%;
color: #fff !important;
max-width: 319px;
padding: 14px 32px;
text-align: center !important;
border-radius: 12px;

font-weight: 700;

font-size: 0.95rem;

text-decoration: none !important;

display: inline-flex;
justify-content: center;
align-items: center;

gap: 10px;

border: none;

transition: var(--cl-trans);

box-shadow: 0 8px 25px rgba(29, 78, 216, 0.4);

}

.cl-btn-primary:hover {

transform: translateY(-3px);

box-shadow: 0 14px 35px rgba(29, 78, 216, 0.5);

color: #fff !important;

}

.cl-btn-outline {

background: rgba(255, 255, 255, 0.08);
width: 100%;
 
color: #fff !important;

padding: 14px 32px;

border-radius: 12px;

font-weight: 700;

font-size: 0.95rem;

text-decoration: none !important;

display: inline-flex;
justify-content: center;
align-items: center;

gap: 10px;

border: 1.5px solid rgba(255, 255, 255, 0.3);

transition: var(--cl-trans);

backdrop-filter: blur(10px);

}

.cl-btn-outline:hover {

background: rgba(255, 255, 255, 0.18);

border-color: rgba(255, 255, 255, 0.6);

transform: translateY(-3px);

color: #fff !important;

}

/* ---- SECTION HEADINGS ---- */

.cl-sec-title {

font-size: clamp(1.9rem, 3.5vw, 2.8rem);

font-weight: 700;

color: var(--cl-navy) !important;

line-height: 1.2;

margin-bottom: 16px;

}

.cl-sec-desc {

font-size: 1rem;

color: var(--cl-slate-dark);

line-height: 1.7;

max-width: 600px;

}

/* ---- RESPONSIVE ---- */

@media (max-width: 991px) {

.cl-hero {

padding: 100px 0 70px;

min-height: auto;

}

.cl-hero-art {

height: 320px;

margin-top: 40px;

}

.cl-stat-card {

border-right: none;

border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.cl-stat-card:last-child {

border-bottom: none;

}

.cl-eng-timeline::before {

left: 28px;

}

.cl-eng-circle {

width: 52px;

height: 52px;

font-size: 1.1rem;

}

}

@media (max-width: 767px) {

.cl-featured-card {

padding: 26px 20px;

}

.cl-testi-card {

padding: 26px 22px;

}

.cl-cta-sec {

padding: 70px 0;

}

.cl-eng-step {

gap: 18px;

}

.cl-eng-body {

padding: 18px 20px;

}

.cl-orbit-logo {

width: 44px;

height: 44px;

font-size: 1.2rem;

}

.cl-hero-center-hub {

width: 100px;

height: 100px;

padding: 16px;

border-width: 3px;

}

}

@media (max-width: 575px) {

.cl-hero-art {

height: 260px;

}

.cl-hero-center-hub {

width: 76px;

height: 76px;

padding: 12px;

border-width: 2.5px;

}

.cl-stats-sec {

padding: 50px 0;

}

.cl-stat-num {

font-size: 2rem;

}

.cl-eng-timeline::before {

left: 22px;

}

.cl-eng-circle {

width: 42px;

height: 42px;

font-size: 1rem;

}

}

/* ============================================================ */

/* MICROLAN ENTERPRISE BLOG SYSTEM - bl- Prefix */

/* ============================================================ */

/* --- HERO SECTION --- */

.bl-hero {

background: #ffffff;

padding: 160px 0 100px;

position: relative;

overflow: hidden;

}

/* Dot grid overlay pattern */

.bl-hero-grid-pattern {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1.5px, transparent 1.5px);

background-size: 24px 24px;

z-index: 1;

pointer-events: none;

}

/* Moving glow backdrop spots */

.bl-hero-glow-1 {

position: absolute;

top: -10%;

right: 15%;

width: 400px;

height: 400px;

border-radius: 50%;

background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0) 70%);

filter: blur(40px);

z-index: 1;

pointer-events: none;

animation: bl-glow-move-1 12s ease-in-out infinite alternate;

}

.bl-hero-glow-2 {

position: absolute;

bottom: 10%;

left: 10%;

width: 350px;

height: 350px;

border-radius: 50%;

background: radial-gradient(circle, rgba(167, 139, 250, 0.12) 0%, rgba(167, 139, 250, 0) 70%);

filter: blur(30px);

z-index: 1;

pointer-events: none;

animation: bl-glow-move-2 15s ease-in-out infinite alternate;

}

@keyframes bl-glow-move-1 {

0% {

transform: translate(0, 0) scale(1);

}

100% {

transform: translate(60px, 40px) scale(1.15);

}

}

@keyframes bl-glow-move-2 {

0% {

transform: translate(0, 0) scale(1);

}

100% {

transform: translate(-40px, -30px) scale(1.1);

}

}

/* Premium Badge */

.bl-hero-badge {

display: inline-flex;

align-items: center;

gap: 10px;

background: rgba(29, 78, 216, 0.05);

border: 1px solid rgba(29, 78, 216, 0.12);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

color: #1D4ED8;

padding: 8px 18px;

border-radius: 100px;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.5px;

margin-bottom: 28px;

box-shadow: 0 4px 15px rgba(29, 78, 216, 0.03);

}

.bl-badge-dot {

width: 8px;

height: 8px;

background-color: #1D4ED8;

border-radius: 50%;

display: inline-block;

position: relative;

}

.bl-badge-dot::after {

content: '';

position: absolute;

top: -4px;

left: -4px;

right: -4px;

bottom: -4px;

border-radius: 50%;

border: 2px solid #1D4ED8;

opacity: 0;

animation: bl-dot-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;

}

@keyframes bl-dot-pulse {

0% {

transform: scale(0.6);

opacity: 0.8;

}

100% {

transform: scale(2.2);

opacity: 0;

}

}

/* Hero Title */

.bl-hero-title {

font-size: clamp(2.4rem, 4vw, 3.8rem);

font-weight: 700;

color: #0F172A;

line-height: 1.15;

margin-bottom: 24px;

letter-spacing: -1.5px;

}

@keyframes bl-grad-shift {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

/* Hero Desc */

.bl-hero-desc {

font-size: 1.1rem;

color: #475569;

line-height: 1.75;

max-width: 620px;

margin-bottom: 38px;

}

/* Glassmorphism Search Bar */

.bl-search-wrap {

display: flex;

align-items: center;

background: rgba(255, 255, 255, 0.85);

border: 1.5px solid #E2E8F0;

padding: 6px 6px 6px 16px;

border-radius: 16px;

max-width: 550px;

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05);

position: relative;

z-index: 2;

transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

.bl-search-wrap:focus-within {

border-color: #1D4ED8;

box-shadow: 0 10px 45px rgba(29, 78, 216, 0.12);

transform: translateY(-2px);

}

.bl-search-inner {

display: flex;

align-items: center;

flex-grow: 1;

gap: 12px;

}

.bl-search-icon {

color: #94A3B8;

font-size: 1rem;

transition: color 0.3s ease;

}

.bl-search-wrap:focus-within .bl-search-icon {

color: #1D4ED8;

}

.bl-search-input {

border: none;

outline: none;

padding: 10px 0;

width: 100%;

font-size: 0.95rem;

color: #0F172A;

background: transparent;

}

.bl-search-input::placeholder {

color: #94A3B8;

}

.bl-search-btn {

background: linear-gradient(135deg, #1D4ED8 0%, #1e40af 100%);

color: #FFFFFF;

border: none;

padding: 12px 28px;

border-radius: 12px;

font-weight: 700;

font-size: 0.92rem;

cursor: pointer;

transition: all 0.2s ease;

display: flex;

align-items: center;

gap: 8px;

white-space: nowrap;

box-shadow: 0 4px 15px rgba(29, 78, 216, 0.2);

}

.bl-search-btn:hover {

transform: translateY(-1px);

box-shadow: 0 6px 20px rgba(29, 78, 216, 0.3);

}

.bl-search-btn:active {

transform: translateY(1px);

}

/* Trending Shortcuts */

.bl-hero-popular-tags {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 8px 12px;

margin-top: 24px;

font-size: 0.85rem;

}

.bl-hero-popular-tags .tags-label {

color: #64748B;

font-weight: 600;

}

.bl-hero-popular-tags .tag-shortcut {

color: #475569;

text-decoration: none;

font-weight: 600;

background: #F1F5F9;

padding: 4px 10px;

border-radius: 8px;

transition: all 0.25s ease;

border: 1px solid transparent;

}

.bl-hero-popular-tags .tag-shortcut:hover {

color: #1D4ED8;

background: rgba(29, 78, 216, 0.05);

border-color: rgba(29, 78, 216, 0.12);

transform: translateY(-1px);

}

/* --- INTERACTIVE TECH DASHBOARD VISUAL (RIGHT COLUMN) --- */

.bl-hero-dashboard {

position: relative;

width: 100%;

max-width: 440px;

height: 380px;

z-index: 2;

}

.dashboard-glow {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 280px;

height: 280px;

background: radial-gradient(circle, rgba(29, 78, 216, 0.2) 0%, transparent 70%);

border-radius: 50%;

filter: blur(40px);

z-index: 0;

pointer-events: none;

}

.db-card {

background: #ffffff;

border: 1.5px solid #E2E8F0;

border-radius: 20px;

box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);

position: absolute;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.db-card:hover {

transform: translateY(-5px) scale(1.02);

box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);

border-color: rgba(29, 78, 216, 0.2);

}

/* Main card */

.db-card-main {

top: 10%;

left: 0;

width: 380px;

z-index: 2;

animation: bl-widget-float-a 6s ease-in-out infinite alternate;

}

.db-card-header {

display: flex;

align-items: center;

gap: 6px;

padding: 14px 20px;

border-bottom: 1.5px solid #F1F5F9;

background: #F8FAFC;

border-radius: 20px 20px 0 0;

}

.db-dot {

width: 10px;

height: 10px;

border-radius: 50%;

}

.db-dot.red {

background-color: #EF4444;

}

.db-dot.yellow {

background-color: #F59E0B;

}

.db-dot.green {

background-color: #10B981;

}

.db-title {

font-size: 0.8rem;

color: #64748B;

margin-left: 8px;

font-weight: 600;

}

.db-card-body {

padding: 24px;

}

.db-stat-row {

display: flex;

gap: 32px;

margin-bottom: 20px;

}

.db-stat-item {

display: flex;

flex-direction: column;

}

.db-stat-val {

font-size: 2.2rem;

font-weight: 900;

line-height: 1;

background: linear-gradient(135deg, #1D4ED8 0%, #06B6D4 100%);

-webkit-text-fill-color: transparent;

margin-bottom: 4px;

}

.db-stat-lbl {

font-size: 0.78rem;

color: #64748B;

font-weight: 600;

}

.db-chart-wrap {

width: 100%;

margin-top: 10px;

}

.db-chart-svg {

width: 100%;

display: block;

}

/* Floating widget 1: Live Readers */

.db-widget-live {

bottom: 5%;

right: 5%;

width: 180px;

padding: 16px 20px;

display: flex;

align-items: center;

gap: 12px;

z-index: 3;

animation: bl-widget-float-b 5s ease-in-out infinite alternate;

}

.live-dot-pulse {

width: 10px;

height: 10px;

background-color: #10B981;

border-radius: 50%;

position: relative;

}

.live-dot-pulse::after {

content: '';

position: absolute;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

border-radius: 50%;

border: 2px solid #10B981;

opacity: 0;

animation: bl-live-pulse 1.8s ease-out infinite;

}

@keyframes bl-live-pulse {

0% {

transform: scale(0.6);

opacity: 0.8;

}

100% {

transform: scale(2.2);

opacity: 0;

}

}

.live-info {

display: flex;

flex-direction: column;

}

.live-count {

font-size: 1.15rem;

font-weight: 700;

color: #0F172A;

line-height: 1.1;

}

.live-lbl {

font-size: 0.7rem;

color: #64748B;

font-weight: 600;

}

/* Floating widget 2: Category */

.db-widget-category {

top: 45%;

right: -10px;

width: 190px;

padding: 16px 20px;

display: flex;

align-items: center;

gap: 14px;

z-index: 1;

animation: bl-widget-float-c 7s ease-in-out infinite alternate;

}

.cat-icon-wrap {

width: 40px;

height: 40px;

border-radius: 12px;

background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);

color: #7C3AED;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.15rem;

}

.cat-info {

display: flex;

flex-direction: column;

}

.cat-lbl {

font-size: 0.65rem;

color: #7C3AED;

font-weight: 700;

letter-spacing: 1px;

}

.cat-val {

font-size: 0.95rem;

font-weight: 700;

color: #0F172A;

}

/* Floating Tags */

.db-floating-tag {

position: absolute;

padding: 6px 14px;

background: #ffffff;

border: 1px solid #E2E8F0;

border-radius: 100px;

font-size: 0.75rem;

font-weight: 700;

color: #334155;

box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);

z-index: 4;

}

.db-floating-tag.tag-aws {

top: 0;

right: 40px;

color: #FF9900;

border-color: rgba(255, 153, 0, 0.2);

animation: bl-widget-float-d 8s ease-in-out infinite alternate;

}

.db-floating-tag.tag-k8s {

bottom: 45%;

left: -20px;

color: #326CE5;

border-color: rgba(50, 108, 229, 0.2);

animation: bl-widget-float-e 6s ease-in-out infinite alternate;

}

.db-floating-tag.tag-django {

bottom: -10px;

left: 80px;

color: #092E20;

border-color: rgba(9, 46, 32, 0.2);

animation: bl-widget-float-f 7s ease-in-out infinite alternate;

}

/* Widget Float Keyframes */

@keyframes bl-widget-float-a {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-12px);

}

}

@keyframes bl-widget-float-b {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-8px);

}

}

@keyframes bl-widget-float-c {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-10px);

}

}

@keyframes bl-widget-float-d {

0% {

transform: translateY(0) rotate(0deg);

}

100% {

transform: translateY(-15px) rotate(2deg);

}

}

@keyframes bl-widget-float-e {

0% {

transform: translateY(0) rotate(0deg);

}

100% {

transform: translateY(-12px) rotate(-2deg);

}

}

@keyframes bl-widget-float-f {

0% {

transform: translateY(0) rotate(0deg);

}

100% {

transform: translateY(-10px) rotate(1deg);

}

}

/* --- FEATURED SECTION --- */

.bl-featured-sec {

padding: 85px 0;

background: #FFFFFF;

}

.bl-section-badge {

font-size: 0.8rem;

font-weight: 700;

color: #1D4ED8;

letter-spacing: 1.5px;

text-transform: uppercase;

display: block;

margin-bottom: 12px;

}

.bl-sec-title {

font-size: clamp(2rem, 4vw, 2.75rem);

font-weight: 850;

color: #0F172A;

letter-spacing: -0.5px;

margin-bottom: 15px;

}

.sline {

width: 60px;

height: 4px;

background: #1D4ED8;

border-radius: 10px;

margin-bottom: 20px;

}

.bl-read-btn {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 12px 28px;

border-radius: 10px;

font-weight: 700;

font-size: 0.9rem;

background: #1D4ED8;

color: #FFFFFF !important;

text-decoration: none !important;

box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);

transition: all 0.3s ease;

}

.bl-read-btn:hover {

background: #1e40af;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(29, 78, 216, 0.35);

}

/* --- ARTICLE CARDS --- */

.bl-featured-card {

background: #FFFFFF;

border: 1px solid #E2E8F0;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);

transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

display: flex;

flex-direction: column;

}

.bl-featured-card:hover {

transform: translateY(-6px);

border-color: rgba(29, 78, 216, 0.15);

box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);

}

.bl-featured-img-wrap {

overflow: hidden;

position: relative;

background: #F8FAFC;

}

/* Image Illustration Gradients */

.bl-img-gradient-1 {

background: linear-gradient(135deg, #1D4ED8, #06B6D4);

}

.bl-img-gradient-2 {

background: linear-gradient(135deg, #7C3AED, #EC4899);

}

.bl-img-gradient-3 {

background: linear-gradient(135deg, #1E3A8A, #3B82F6);

}

.bl-img-gradient-4 {

background: linear-gradient(135deg, #0F172A, #2563EB);

}

.bl-img-gradient-5 {

background: linear-gradient(135deg, #10B981, #059669);

}

.bl-img-gradient-6 {

background: linear-gradient(135deg, #F59E0B, #D97706);

}

.bl-img-icon {

display: flex;

align-items: center;

justify-content: center;

color: rgba(255, 255, 255, 0.85);

font-size: 5rem;

transition: transform 0.5s ease;

}

.bl-featured-card:hover .bl-img-icon {

transform: scale(1.08) rotate(2deg);

}

.bl-featured-body {

padding: 30px;

flex-grow: 1;

display: flex;

flex-direction: column;

}

.bl-cat-tag {

display: inline-block;

font-size: 0.75rem;

font-weight: 700;

color: #1D4ED8;

background: rgba(29, 78, 216, 0.06);

padding: 4px 12px;

border-radius: 100px;

margin-bottom: 15px;

align-self: flex-start;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.bl-featured-title {

font-weight: 700;

line-height: 1.4;

margin-bottom: 12px;

}

.bl-featured-title a {

color: #0F172A;

text-decoration: none !important;

transition: color 0.2s ease;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.bl-featured-title a:hover {

color: #1D4ED8;

}

.bl-article-meta {

margin-top: auto;

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 15px;

color: #64748B;

font-size: 0.82rem;

font-weight: 500;

border-top: 1px solid #F1F5F9;

padding-top: 20px;

}

.bl-article-meta span {

display: inline-flex;

align-items: center;

gap: 6px;

}

.bl-article-meta i {

color: #94A3B8;

}

/* Side Card layout inside flex column */

.col-lg-5 .bl-featured-card {

flex-direction: row;

align-items: stretch;

}

.col-lg-5 .bl-featured-card .bl-featured-img-wrap {

width: 150px;

flex-shrink: 0;

}

.col-lg-5 .bl-featured-card .bl-featured-body {

padding: 20px;

}

.col-lg-5 .bl-featured-card .bl-article-meta {

border-top: none;

padding-top: 0;

margin-top: 8px;

}

/* --- CATEGORY FILTER TABS --- */

.bl-categories-sec {

padding: 35px 0;

background: #F8FAFC;

border-top: 1px solid #E2E8F0;

border-bottom: 1px solid #E2E8F0;

}

.bl-cat-tabs {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

}

.bl-cat-tab {

padding: 10px 22px;

background: #FFFFFF;

border: 1px solid #E2E8F0;

border-radius: 100px;

color: #475569 !important;

font-weight: 600;

font-size: 0.9rem;

text-decoration: none !important;

transition: all 0.25s ease;

box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01);

}

.bl-cat-tab:hover {

border-color: #1D4ED8;

color: #1D4ED8 !important;

background: rgba(29, 78, 216, 0.02);

}

.bl-cat-tab.active {

background: #1D4ED8;

border-color: #1D4ED8;

color: #FFFFFF !important;

box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);

}

/* --- ARTICLES GRID --- */

.bl-articles-sec {

padding: 85px 0;

background: #FFFFFF;

}

.bl-article-card {

background: #FFFFFF;

border: 1px solid #E2E8F0;

border-radius: 18px;

overflow: hidden;

height: 100%;

display: flex;

flex-direction: column;

box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.bl-article-card:hover {

transform: translateY(-5px);

border-color: rgba(29, 78, 216, 0.15);

box-shadow: 0 15px 30px rgba(15, 23, 42, 0.06);

}

.bl-article-card .bl-article-img-wrap {

height: 220px;

overflow: hidden;

position: relative;

}

.bl-article-card .bl-img-icon {

font-size: 4rem;

height: 100%;

}

.bl-article-card:hover .bl-img-icon {

transform: scale(1.08);

}

.bl-article-body {

padding: 25px;

display: flex;

flex-direction: column;

flex-grow: 1;

}

.bl-article-body p {

color: #64748B;

line-height: 1.6;

margin-bottom: 20px;

}

.bl-article-body .bl-article-meta {

border-top: 1px solid #F1F5F9;

padding-top: 18px;

margin-top: auto;

}

/* --- TRENDING SLIDER --- */

.bl-trending-sec {

padding: 85px 0;

background: #F8FAFC;

border-top: 1px solid #E2E8F0;

border-bottom: 1px solid #E2E8F0;

overflow: hidden;

}

.bl-trending-track {

display: flex;

gap: 24px;

overflow-x: auto;

padding: 10px 0 20px;

scroll-snap-type: x mandatory;

scrollbar-width: none;

}

.bl-trending-track::-webkit-scrollbar {

display: none;

}

.bl-trending-card {

flex: 0 0 320px;

background: #FFFFFF;

border: 1px solid #E2E8F0;

border-radius: 18px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);

scroll-snap-align: start;

transition: all 0.3s ease;

display: flex;

flex-direction: column;

}

.bl-trending-card:hover {

transform: translateY(-4px);

box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06);

border-color: rgba(29, 78, 216, 0.12);

}

.bl-trending-body {

padding: 24px;

position: relative;

flex-grow: 1;

display: flex;

flex-direction: column;

}

.bl-trending-body a {

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.bl-trend-num {

position: absolute;

top: 20px;

right: 20px;

font-size: 2.2rem;

font-weight: 900;

color: rgba(29, 78, 216, 0.08);

line-height: 1;

}

/* --- POPULAR TAG CLOUD --- */

.bl-tags-sec {

padding: 85px 0;

background: #FFFFFF;

}

.bl-tag {

display: inline-block;

padding: 8px 18px;

background: #F1F5F9;

border: 1px solid #E2E8F0;

border-radius: 100px;

color: #475569 !important;

font-weight: 600;

font-size: 0.88rem;

text-decoration: none !important;

margin: 5px;

transition: all 0.2s ease;

}

.bl-tag:hover {

background: rgba(29, 78, 216, 0.06);

border-color: #1D4ED8;

color: #1D4ED8 !important;

}

.bl-tag-lg {

padding: 10px 22px;

font-size: 0.95rem;

border-width: 1.5px;

}

.bl-tag-sm {

padding: 5px 12px;

font-size: 0.78rem;

}

/* --- NEWSLETTER BLOCK --- */

.bl-newsletter-sec {

padding: 95px 0;

background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);

color: #FFFFFF;

position: relative;

overflow: hidden;

}

.bl-newsletter-sec::before {

content: '';

position: absolute;

bottom: -50px;

left: -50px;

width: 250px;

height: 250px;

background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, transparent 70%);

pointer-events: none;

}

.bl-newsletter-badge {

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

color: #93C5FD;

padding: 6px 14px;

border-radius: 100px;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 1.5px;

text-transform: uppercase;

margin-bottom: 20px;

display: inline-block;

}

.bl-newsletter-title {

font-size: clamp(2rem, 4vw, 2.75rem);

font-weight: 700;

line-height: 1.25;

margin-bottom: 20px;

}

.bl-newsletter-form {

display: flex;

gap: 12px;

max-width: 500px;

}

.bl-newsletter-input {

flex-grow: 1;

background: rgba(255, 255, 255, 0.07);

border: 1px solid rgba(255, 255, 255, 0.18);

padding: 14px 20px;

border-radius: 12px;

color: #FFFFFF;

outline: none;

font-size: 0.95rem;

transition: all 0.3s ease;

}

.bl-newsletter-input:focus {

background: rgba(255, 255, 255, 0.12);

border-color: #60A5FA;

box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);

}

.bl-newsletter-input::placeholder {

color: rgba(255, 255, 255, 0.4);

}

.bl-newsletter-btn {

background: #FFFFFF;

color: #0F172A;

border: none;

font-weight: 700;

padding: 14px 28px;

border-radius: 12px;

cursor: pointer;

transition: all 0.2s ease;

white-space: nowrap;

}

.bl-newsletter-btn:hover {

background: #F1F5F9;

transform: translateY(-1px);

}

/* --- CTA SECTION --- */

.bl-cta-sec {

padding: 100px 0;

background: #FFFFFF;

text-align: center;

}

/* ============================================================ */

/* MICROLAN BLOG DETAIL SYSTEM - bd- Prefix */

/* ============================================================ */

/* Reading Progress Indicator */

.bd-progress-bar {

position: fixed;

top: 0;

left: 0;

height: 4px;

background: linear-gradient(90deg, #1D4ED8 0%, #0EA5E9 100%);

width: 0%;

z-index: 1030;

transition: width 0.1s ease;

}

.bd-hero {

background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

padding: 160px 0 60px;

border-bottom: 1px solid #E2E8F0;

}

.bd-breadcrumb {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 8px;

color: #64748B;

font-size: 0.85rem;

font-weight: 600;

margin-bottom: 25px;

}

.bd-breadcrumb a {

color: #64748B;

text-decoration: none !important;

transition: color 0.2s ease;

}

.bd-breadcrumb a:hover {

color: #1D4ED8;

}

.bd-breadcrumb i {

font-size: 0.7rem;

color: #94A3B8;

}

.bd-hero-cat {

display: inline-block;

font-size: 0.78rem;

font-weight: 700;

color: #1D4ED8;

background: rgba(29, 78, 216, 0.06);

padding: 6px 14px;

border-radius: 100px;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 0.8px;

}

.bd-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

color: #0F172A;

line-height: 1.25;

margin-bottom: 24px;

letter-spacing: -0.8px;

}

.bd-author-row {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;

}

.bd-author-avatar {

width: 44px;

height: 44px;

border-radius: 50%;

background: #1D4ED8;

color: #FFFFFF;

font-weight: 700;

display: flex;

align-items: center;

justify-content: center;

font-size: 0.95rem;

border: 2px solid #E0E7FF;

}

.bd-author-name {

font-weight: 700;

color: #0F172A;

font-size: 0.95rem;

}

.bd-author-role {

font-size: 0.78rem;

color: #64748B;

font-weight: 500;

}

.bd-meta-pills {

display: inline-flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;

font-size: 0.82rem;

color: #64748B;

font-weight: 500;

}

.bd-meta-pills span {

display: inline-flex;

align-items: center;

gap: 6px;

background: #F1F5F9;

padding: 4px 12px;

border-radius: 100px;

}

.bd-featured-img-wrap {

border-radius: 24px;

overflow: hidden;

box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);

border: 1px solid #E2E8F0;

background: #F8FAFC;

}

.bd-featured-img-wrap .bl-img-gradient-1 {

display: flex;

align-items: center;

justify-content: center;

}

/* Article Layout and Main Content */

.bd-article-sec {

padding: 70px 0;

background: #FFFFFF;

}

.bd-article-body {

font-size: 1.125rem;

line-height: 1.85;

color: #334155;

}

.bd-article-body p {

margin-bottom: 28px;

}

.bd-article-body h2 {

font-size: 1.8rem;

font-weight: 700;

color: #0F172A;

margin-top: 50px;

margin-bottom: 22px;

letter-spacing: -0.5px;

scroll-margin-top: 110px;

}

.bd-article-body h3 {

font-size: 1.4rem;

font-weight: 750;

color: #0F172A;

margin-top: 38px;

margin-bottom: 16px;

}

.bd-article-body blockquote {

border-left: 4px solid #1D4ED8;

padding: 12px 20px 12px 24px;

margin: 40px 0;

font-style: italic;

font-weight: 500;

color: #1E3A8A;

font-size: 1.2rem;

line-height: 1.65;

background: rgba(29, 78, 216, 0.03);

border-radius: 0 12px 12px 0;

}

.bd-article-body ul,

.bd-article-body ol {

margin-bottom: 28px;

padding-left: 24px;

}

.bd-article-body li {

margin-bottom: 10px;

}

/* Stat Box Grid */

.bd-stat-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

margin: 40px 0;

}

.bd-stat-box {

background: #F8FAFC;

border: 1.5px solid #E2E8F0;

border-radius: 16px;

padding: 24px;

text-align: center;

transition: all 0.3s ease;

}

.bd-stat-box:hover {

border-color: #1D4ED8;

transform: translateY(-2px);

box-shadow: 0 8px 20px rgba(29, 78, 216, 0.04);

}

.bd-stat-num {

font-size: 2.2rem;

margin-bottom: 8px;

}

.bd-stat-lbl {

font-size: 0.82rem;

font-weight: 600;

color: #64748B;

line-height: 1.4;

}

/* Highlighting and Key Insights */

.bd-highlight-box {

background: #F0F7FF;

border: 1px solid rgba(29, 78, 216, 0.12);

border-left: 4px solid #1D4ED8;

border-radius: 12px;

padding: 24px;

margin: 35px 0;

}

.bd-highlight-box h5 {

font-weight: 700;

color: #1D4ED8;

font-size: 1rem;

display: flex;

align-items: center;

gap: 8px;

margin-bottom: 12px;

}

/* Share Block */

.bd-share-wrap {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 10px;

margin-top: 50px;

padding-top: 30px;

border-top: 1.5px solid #F1F5F9;

}

.bd-share-label {

font-weight: 700;

color: #475569;

font-size: 0.88rem;

margin-right: 10px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.bd-share-btn {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 8px 18px;

border-radius: 8px;

font-size: 0.85rem;

font-weight: 600;

text-decoration: none !important;

transition: all 0.2s ease;

border: 1.5px solid #E2E8F0;

color: #475569;

background: #FFFFFF;

}

.bd-share-btn:hover {

background: #F8FAFC;

color: #0F172A;

border-color: #CBD5E1;

}

.bd-share-btn.twitter:hover {

color: #1DA1F2;

border-color: rgba(29, 161, 242, 0.3);

background: rgba(29, 161, 242, 0.04);

}

.bd-share-btn.linkedin:hover {

color: #0077B5;

border-color: rgba(0, 119, 181, 0.3);

background: rgba(0, 119, 181, 0.04);

}

.bd-share-btn.whatsapp:hover {

color: #25D366;

border-color: rgba(37, 211, 102, 0.3);

background: rgba(37, 211, 102, 0.04);

}

.bd-share-btn.copy:hover {

color: #1D4ED8;

border-color: rgba(29, 78, 216, 0.3);

background: rgba(29, 78, 216, 0.04);

}

.bd-author-card-avatar {

background: #1D4ED8;

color: #FFFFFF;

font-weight: 700;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

border: 3px solid #E0E7FF;

}

/* --- SIDEBAR AND TABLE OF CONTENTS --- */

.bd-sidebar {

position: sticky;

top: 100px;

display: flex;

flex-direction: column;

gap: 28px;

}

.bd-toc-card {

background: #FFFFFF;

border: 1.5px solid #E2E8F0;

border-radius: 18px;

padding: 24px;

}

.bd-toc-title {

font-size: 0.75rem;

font-weight: 700;

color: #64748B;

letter-spacing: 1.5px;

text-transform: uppercase;

display: flex;

align-items: center;

gap: 8px;

margin-bottom: 18px;

border-bottom: 1.5px solid #F1F5F9;

padding-bottom: 12px;

}

.bd-toc-list {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-direction: column;

gap: 12px;

}

.bd-toc-list a {

color: #475569;

text-decoration: none !important;

font-size: 0.88rem;

font-weight: 600;

display: block;

line-height: 1.4;

transition: all 0.25s ease;

}

.bd-toc-list a:hover {

color: #1D4ED8;

}

.bd-toc-list a.active {

color: #1D4ED8;

padding-left: 10px;

border-left: 2px solid #1D4ED8;

}

/* --- RELATED ARTICLES FOOTER --- */

.bd-related-sec {

padding: 85px 0;

background: #FFFFFF;

border-top: 1.5px solid #F1F5F9;

}

.bd-related-card {

background: #FFFFFF;

border: 1px solid #E2E8F0;

border-radius: 18px;

overflow: hidden;

height: 100%;

display: flex;

flex-direction: column;

box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);

transition: all 0.3s ease;

}

.bd-related-card:hover {

transform: translateY(-4px);

border-color: rgba(29, 78, 216, 0.12);

box-shadow: 0 12px 25px rgba(15, 23, 42, 0.05);

}

.bd-related-body {

padding: 24px;

display: flex;

flex-direction: column;

flex-grow: 1;

}

/* --- RESPONSIVE MEDIA QUERIES --- */

@media (max-width: 991px) {

.bl-hero {

padding: 130px 0 65px;

}

.bd-hero {

padding: 130px 0 55px;

}

.bd-sidebar {

position: static;

margin-top: 40px;

}

.col-lg-5 .bl-featured-card {

flex-direction: column;

align-items: stretch;

}

.col-lg-5 .bl-featured-card .bl-featured-img-wrap {

width: 100%;

height: 180px;

}

}

@media (max-width: 767px) {

.bd-article-body {

font-size: 1.05rem;

}

.bl-search-wrap {

flex-direction: column;

background: transparent;

border: none;

box-shadow: none;

padding: 0;

gap: 12px;

align-items: stretch;

}

.bl-search-inner {

background: #FFFFFF;

border: 1.5px solid #E2E8F0;

border-radius: 12px;

padding: 4px 16px;

display: flex;

align-items: center;

gap: 12px;

}

.bl-search-input {

background: transparent;

border: none;

padding: 12px 0;

}

.bl-search-btn {

width: 100%;

justify-content: center;

padding: 14px;

border-radius: 12px;

}

.bl-newsletter-form {

flex-direction: column;

gap: 10px;

}

.bl-newsletter-btn {

width: 100%;

padding: 14px;

}

}

/* ── PRODUCT DROPDOWN STYLES ── */

#dd-products .dropdown {

min-width: 760px;

}

/* Hover-based dropdowns on desktop */

@media (min-width: 1024px) {

.nav-item:hover .dropdown {

display: block !important;

}

.nav-item:hover>button .chev-xs,

.nav-item:hover>a .chev-xs {

transform: rotate(180deg) !important;

}

}

.dd-meta {

display: flex;

align-items: center;

gap: 8px;

font-size: 10px;

margin-bottom: 2px;

}

.dd-cat-badge {

background: rgba(29, 78, 216, 0.08);

color: var(--primary);

padding: 2px 6px;

border-radius: 4px;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 0.5px;

}

.dd-sub-title {

color: var(--sl400);

font-weight: 600;

}

.dd-desc {

font-size: 11px;

color: #64748B;

line-height: 1.4;

margin: 4px 0 0 0;

}

/* Ensure the links inside products dropdown render well */

#dd-products .dd-grid {

grid-template-columns: repeat(3, 1fr) !important;

gap: 8px !important;

}

#dd-products .dd-item {

padding: 12px 14px !important;

align-items: center !important;

}

#dd-products .dd-title {

font-size: 13px !important;

}

#dd-products .dd-sub-title {

font-size: 10.5px !important;

}

#dd-products .dd-icon {

margin-top: 0 !important;

width: 34px !important;

height: 34px !important;

}

#dd-products .dropdown {

min-width: 700px !important;

}

.nav-item>a .chev-xs {

width: 14px;

height: 14px;

transition: transform .2s;

flex-shrink: 0;

}

/* ── PRODUCT DROPDOWN (prod-*) ───────────────────────── */

.prod-dropdown {

min-width: 660px !important;

}

.prod-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 6px;

}

.prod-item {

display: flex;

align-items: center;

gap: 11px;

padding: 10px 12px;

border-radius: 11px;

text-decoration: none;

border: 1px solid transparent;

transition: background .15s, border-color .15s;

}

.prod-item:hover {

background: var(--sl50, #f8fafc);

border-color: var(--border, #e2e8f0);

}

.prod-icon {

width: 36px;

height: 36px;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 15px;

flex-shrink: 0;

}

.prod-text {

display: flex;

flex-direction: column;

gap: 2px;

min-width: 0;

}

.prod-name {

font-size: 13px;

font-weight: 700;

color: var(--navy, #0f172a);

line-height: 1.25;

white-space: nowrap;

}

.prod-cat {

font-size: 10.5px;

font-weight: 500;

color: var(--sl400, #94a3b8);

line-height: 1.3;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* ============================================================

PREMIUM CSS VARIABLES & UTILITIES (ABOUT SPECIFIC)

============================================================ */

:root {

--about-grad-primary: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);

--about-grad-dark: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 100%);

--about-grad-accent: linear-gradient(135deg, #2563EB 0%, #8B5CF6 100%);

--about-glass-bg: rgba(255, 255, 255, 0.75);

--about-glass-border: rgba(29, 78, 216, 0.08);

--about-card-shadow: 0 10px 30px rgba(30, 27, 75, 0.06);

--about-card-shadow-hover: 0 22px 50px rgba(30, 27, 75, 0.12);

--about-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}

.about-page-wrapper {

overflow-x: hidden;

position: relative;

}

.about-bg-blob {

position: absolute;

border-radius: 50%;

filter: blur(100px);

opacity: 0.08;

pointer-events: none;

z-index: 0;

}

.about-blob-1 {

width: 500px;

height: 500px;

background: #2563EB;

top: -100px;

right: -100px;

animation: aboutFloatBlob 12s ease-in-out infinite alternate;

}

.about-blob-2 {

width: 400px;

height: 400px;

background: #8B5CF6;

bottom: 20%;

left: -150px;

animation: aboutFloatBlob 15s ease-in-out infinite alternate-reverse;

}

@keyframes aboutFloatBlob {

0% {

transform: translate(0, 0) scale(1);

}

100% {

transform: translate(40px, 60px) scale(1.1);

}

}

.about-hero {

padding: 140px 0 100px;

background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.07), transparent 60%),

radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.05), transparent 60%),

#ffffff;

position: relative;

text-align: center;

border-bottom: 1px solid rgba(29, 78, 216, 0.05);

}

.about-badge {

display: inline-flex;

align-items: center;

gap: 8px;

background: rgba(29, 78, 216, 0.07);

border: 1px solid rgba(29, 78, 216, 0.1);

border-radius: 30px;

padding: 6px 18px;

margin-bottom: 24px;

font-size: 0.78rem;

font-weight: 700;

color: #1D4ED8;

text-transform: uppercase;

letter-spacing: 1.5px;

}

.about-badge-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: #1D4ED8;

animation: aboutPulse 1.8s infinite;

}

@keyframes aboutPulse {

0% {

transform: scale(0.95);

box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.7);

}

70% {

transform: scale(1);

box-shadow: 0 0 0 8px rgba(29, 78, 216, 0);

}

100% {

transform: scale(0.95);

box-shadow: 0 0 0 0 rgba(29, 78, 216, 0);

}

}

.about-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

line-height: 1.15;

color: #1E1B4B;

margin-bottom: 20px;

letter-spacing: -0.02em;

}

.about-hero-desc {

font-size: 1.05rem;

color: var(--text-secondary, #475569);

line-height: 1.8;

max-width: 780px;

margin: 0 auto 36px;

}

.about-scroll-down {

display: inline-flex;

flex-direction: column;

align-items: center;

gap: 8px;

color: var(--text-secondary, #475569);

font-size: 0.75rem;

font-weight: 700;

letter-spacing: 2px;

text-transform: uppercase;

text-decoration: none;

transition: var(--about-transition);

margin-top: 10px;

}

.about-scroll-down:hover {

color: #1D4ED8;

}

.about-scroll-down i {

animation: aboutBounce 2s infinite;

}

@keyframes aboutBounce {

0%,

20%,

50%,

80%,

100% {

transform: translateY(0);

}

40% {

transform: translateY(-8px);

}

60% {

transform: translateY(-4px);

}

}

.about-overview-sec {

padding: 45px 0;

background: #ffffff;

position: relative;

}

.about-img-wrapper {

position: relative;

padding-right: 20px;

padding-bottom: 20px;

}

.about-img-main {

border-radius: 24px;

box-shadow: 0 20px 40px rgba(30, 27, 75, 0.08);

border: 1px solid rgba(30, 27, 75, 0.05);

object-fit: cover;

width: 100%;

height: 480px;

display: block;

transition: var(--about-transition);

}

.about-img-wrapper:hover .about-img-main {

transform: scale(1.02);

}

.about-floating-card {

position: absolute;

bottom: 40px;

right: -10px;

background: var(--about-glass-bg);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid rgba(255, 255, 255, 0.6);

border-radius: 20px;

padding: 24px;

box-shadow: 0 15px 35px rgba(30, 27, 75, 0.1);

display: flex;

align-items: center;

gap: 16px;

animation: aboutFloatCard 6s ease-in-out infinite;

z-index: 2;

}

@keyframes aboutFloatCard {

0%,

100% {

transform: translateY(0);

}

50% {

transform: translateY(-12px);

}

}

.about-floating-icon {

width: 54px;

height: 54px;

background: var(--about-grad-primary);

border-radius: 14px;

display: flex;

align-items: center;

justify-content: center;

color: #ffffff;

font-size: 1.5rem;

box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25);

}

.about-floating-num {

font-size: 1.6rem;

font-weight: 700;

color: #1E1B4B;

line-height: 1;

}

.about-floating-text {

font-size: 0.78rem;

color: #4B5563;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.about-title-left {

font-size: 2.25rem;

font-weight: 700;

line-height: 1.25;

color: #1E1B4B;

margin-bottom: 20px;

}

.about-divider-left {

width: 60px;

height: 4px;

border-radius: 2px;

background: var(--about-grad-primary);

margin-bottom: 24px;

}

.about-paragraph {

font-size: 1rem;

color: #4B5563;

line-height: 1.85;

margin-bottom: 20px;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

}

.about-checklist {

list-style: none;

padding-left: 0;

margin-top: 24px;

margin-bottom: 30px;

}

.about-checklist li {

position: relative;

padding-left: 32px;

margin-bottom: 12px;

font-weight: 600;

color: #1E1B4B;

font-size: 0.95rem;

}

.about-checklist li i {

position: absolute;

left: 0;

top: 3px;

color: #2563EB;

font-size: 1.1rem;

}

.about-stats-sec {

background: var(--about-grad-dark);

padding: 80px 0;

color: #ffffff;

position: relative;

overflow: hidden;

}

.about-stats-sec::before {

content: '';

position: absolute;

inset: 0;

background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);

background-size: 32px 32px;

opacity: 0.5;

pointer-events: none;

}

.about-stat-box {

text-align: center;

padding: 20px;

position: relative;

transition: var(--about-transition);

}

.about-stat-box:hover {

transform: translateY(-5px);

}

.about-stat-num {

font-size: clamp(2.5rem, 6vw, 3.8rem);

font-weight: 700;

line-height: 1;

margin-bottom: 10px;

}

.about-stat-label {

font-size: 0.9rem;

font-weight: 600;

color: #93C5FD;

text-transform: uppercase;

letter-spacing: 1.5px;

}

.about-stat-desc {

font-size: 0.8rem;

color: #93C5FD;

opacity: 0.7;

margin-top: 4px;

}

.about-stat-divider {

position: absolute;

top: 20%;

right: 0;

height: 60%;

width: 1px;

background: rgba(255, 255, 255, 0.1);

}

.about-values-sec {

padding: 100px 0;

background: #F8FAFC;

}

.about-value-card {

background: #ffffff;

border-radius: 20px;

padding: 40px 30px;

border: 1px solid rgba(30, 27, 75, 0.03);

box-shadow: var(--about-card-shadow);

transition: var(--about-transition);

height: 100%;

position: relative;

overflow: hidden;

}

.about-value-card::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 4px;

background: var(--about-grad-primary);

transform: scaleX(0);

transform-origin: left;

transition: transform 0.4s ease;

}

.about-value-card:hover {

transform: translateY(-8px);

box-shadow: var(--about-card-shadow-hover);

border-color: rgba(37, 99, 235, 0.1);

}

.about-value-card:hover::after {

transform: scaleX(1);

}

.about-val-icon-box {

width: 60px;

height: 60px;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.6rem;

margin-bottom: 28px;

transition: var(--about-transition);

}

.about-val-icon-box.val-blue {

background: rgba(29, 78, 216, 0.08);

color: #1D4ED8;

}

.about-val-icon-box.val-purple {

background: rgba(139, 92, 246, 0.08);

color: #8B5CF6;

}

.about-val-icon-box.val-green {

background: rgba(16, 185, 129, 0.08);

color: #10B981;

}

.about-val-icon-box.val-orange {

background: rgba(245, 158, 11, 0.08);

color: #F59E0B;

}

.about-value-card:hover .about-val-icon-box {

transform: scale(1.1) rotate(4deg);

}

.about-value-card h4 {

font-size: 1.25rem;

font-weight: 700;

color: #1E1B4B;

margin-bottom: 14px;

}

.about-value-card p {

font-size: 0.92rem;

color: var(--text-secondary, #475569);

line-height: 1.75;

margin-bottom: 0;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

}

.about-journey-sec {

padding: 100px 0;

background: #ffffff;

position: relative;

}

.about-timeline-container {

position: relative;

max-width: 1000px;

margin: 50px auto 0;

padding: 0 15px;

}

.about-timeline-container::before {

content: '';

position: absolute;

left: 50%;

top: 0;

bottom: 0;

width: 2px;

background: #e2e8f0;

transform: translateX(-50%);

z-index: 1;

}

.about-timeline-item {

position: relative;

margin-bottom: 70px;

width: 100%;

display: flex;

z-index: 2;

}

.about-timeline-item:last-child {

margin-bottom: 0;

}

.about-timeline-badge {

position: absolute;

left: 50%;

top: 15px;

width: 44px;

height: 44px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-weight: 700;

transform: translateX(-50%);

z-index: 3;

transition: var(--about-transition);

font-size: 0.9rem;

}

.about-timeline-badge.outline-badge {

background: #ffffff;

border: 2px solid #e2e8f0;

color: var(--text-secondary, #475569);

}

.about-timeline-badge.active-badge {

background: var(--secondary, #2563EB);

color: #ffffff;

border: none;

box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);

}

.about-timeline-item:hover .about-timeline-badge.outline-badge {

border-color: #2563EB;

color: #2563EB;

transform: translateX(-50%) scale(1.05);

}

.about-timeline-item:hover .about-timeline-badge.active-badge {

transform: translateX(-50%) scale(1.05);

box-shadow: 0 4px 20px rgba(14, 165, 233, 0.6);

}

.about-timeline-content {

width: 44%;

background: #ffffff;

border-radius: 20px;

padding: 30px;

box-shadow: 0 8px 30px rgba(30, 27, 75, 0.03);

border: 1px solid #e2e8f0;

position: relative;

transition: var(--about-transition);

}

.about-timeline-item:hover .about-timeline-content {

box-shadow: 0 15px 40px rgba(30, 27, 75, 0.08);

border-color: rgba(37, 99, 235, 0.15);

transform: translateY(-4px);

}

.about-timeline-item.timeline-left {

justify-content: flex-start;

}

.about-timeline-item.timeline-right {

justify-content: flex-end;

}

/* Custom Timeline badge top */

.timeline-badge-top-container {

display: inline-flex;

align-items: center;

gap: 8px;

background: rgba(139, 92, 246, 0.06);

border: 1px solid rgba(139, 92, 246, 0.12);

border-radius: 30px;

padding: 6px 18px;

margin-bottom: 12px;

}

.timeline-badge-top-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: #8B5CF6;

}

.timeline-badge-top-text {

font-size: 0.8rem;

font-weight: 700;

color: #8B5CF6;

text-transform: uppercase;

letter-spacing: 1.5px;

}

/* Timeline card structures */

.about-timeline-header {

display: flex;

align-items: center;

gap: 16px;

margin-bottom: 16px;

}

.about-timeline-text-side {

display: flex;

flex-direction: column;

}

.about-timeline-subtitle {

font-size: 0.75rem;

font-weight: 700;

color: var(--text-secondary, #475569);

text-transform: uppercase;

letter-spacing: 1px;

}

.about-timeline-card-title {

font-size: 1.25rem;

font-weight: 700;

color: #1e1b4b;

margin: 4px 0 0 0;

}

.about-timeline-icon-box {

width: 46px;

height: 46px;

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

color: #ffffff;

font-size: 1.15rem;

flex-shrink: 0;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}

/* Colors for icon boxes */

.about-timeline-icon-box.bg-blue {

background: #2563EB;

}

.about-timeline-icon-box.bg-cyan {

background: #0ea5e9;

}

.about-timeline-icon-box.bg-purple {

background: #8b5cf6;

}

.about-timeline-icon-box.bg-teal {

background: #10B981;

}

.about-timeline-desc {

font-size: 0.95rem;

color: #4b5563;

line-height: 1.7;

margin-bottom: 20px;

}

/* Tags/pills under descriptions */

.about-timeline-tags {

display: flex;

flex-wrap: wrap;

gap: 8px;

}

.about-timeline-tag {

font-size: 0.72rem;

font-weight: 600;

color: var(--text-secondary, #475569);

background: #f1f5f9;

padding: 4px 12px;

border-radius: 20px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

/* Desktop layout styles */

@media (min-width: 992px) {

.about-timeline-item.timeline-left .about-timeline-header {

justify-content: flex-end;

text-align: right;

}

.about-timeline-item.timeline-left .about-timeline-desc {

text-align: right;

}

.about-timeline-item.timeline-left .about-timeline-tags {

justify-content: flex-end;

}

.about-timeline-item.timeline-right .about-timeline-header {

justify-content: flex-start;

text-align: left;

}

.about-timeline-item.timeline-right .about-timeline-desc {

text-align: left;

}

.about-timeline-item.timeline-right .about-timeline-tags {

justify-content: flex-start;

}

}

.about-cta-sec {

padding: 100px 0;

background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);

position: relative;

overflow: hidden;

}

.about-cta-box {

background: var(--about-grad-primary);

border-radius: 32px;

padding: 70px 60px;

color: #ffffff;

position: relative;

overflow: hidden;

box-shadow: 0 30px 60px rgba(29, 78, 216, 0.25);

}

.about-cta-box::after {

content: '';

position: absolute;

width: 320px;

height: 320px;

background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);

top: -120px;

right: -80px;

border-radius: 50%;

}

.about-cta-title {

font-size: clamp(1.8rem, 4vw, 2.7rem);

font-weight: 700;

line-height: 1.2;

margin-bottom: 16px;

}

.about-cta-desc {

font-size: 1.1rem;

color: rgba(255, 255, 255, 0.85);

max-width: 600px;

margin: 0 auto 36px;

line-height: 1.7;

}

.about-cta-btns {

display: flex;

justify-content: center;

gap: 16px;

flex-wrap: wrap;

}

.about-btn-light {

background: #ffffff;

color: #1D4ED8;

font-weight: 700;

padding: 14px 32px;

border-radius: 50px;

transition: var(--about-transition);

display: inline-flex;

align-items: center;

gap: 8px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}

.about-btn-light:hover {

transform: translateY(-3px);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

background: #EEF2FF;

color: #1D4ED8;

}

.about-btn-outline {

background: transparent;

color: #ffffff;

border: 2px solid rgba(255, 255, 255, 0.4);

font-weight: 700;

padding: 12px 30px;

border-radius: 50px;

transition: var(--about-transition);

display: inline-flex;

align-items: center;

gap: 8px;

}

.about-btn-outline:hover {

border-color: #ffffff;

background: rgba(255, 255, 255, 0.1);

color: #ffffff;

transform: translateY(-3px);

}

@media (max-width: 991px) {

.about-img-wrapper {

padding-right: 0;

padding-bottom: 0;

margin-bottom: 50px;

max-width: 500px;

margin-left: auto;

margin-right: auto;

}

.about-img-main {

height: 380px;

}

.about-stat-divider {

display: none;

}

.about-stat-box {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

padding-bottom: 25px;

margin-bottom: 25px;

}

.about-stats-sec .row div:last-child .about-stat-box {

border-bottom: none;

padding-bottom: 0;

margin-bottom: 0;

}

.about-timeline-container::before {

left: 20px;

transform: none;

}

.about-timeline-badge {

left: 20px;

transform: translateX(-50%);

}

.about-timeline-item:hover .about-timeline-badge {

transform: translateX(-50%) scale(1.05);

}

.about-timeline-content {

width: calc(100% - 45px);

margin-left: 45px;

padding: 24px;

}

.about-timeline-item {

margin-bottom: 45px;

}

.about-timeline-item.timeline-left,

.about-timeline-item.timeline-right {

justify-content: flex-start;

}

.about-timeline-header {

justify-content: flex-start !important;

flex-direction: row !important;

text-align: left !important;

}

.about-timeline-desc {

text-align: justify !;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.about-timeline-tags {

justify-content: flex-start !important;

}

}

@media (max-width: 575px) {

.about-hero {

padding: 110px 0 70px;

}

.about-cta-box {

padding: 50px 20px;

}

.about-floating-card {

padding: 16px;

right: 10px;

bottom: 20px;

}

.about-floating-icon {

width: 44px;

height: 44px;

font-size: 1.25rem;

}

.about-floating-num {

font-size: 1.3rem;

}

}

/* ============================================================

DYNAMIC STYLE VARIABLES (TESTIMONIAL SPECIFIC)

============================================================ */

:root {

--testi-grad-primary: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);

--testi-grad-dark: linear-gradient(135deg, #1E1B4B 0%, #1E3A8A 100%);

--testi-glass-bg: rgba(255, 255, 255, 0.85);

--testi-card-shadow: 0 10px 30px rgba(30, 27, 75, 0.05);

--testi-card-shadow-hover: 0 20px 45px rgba(30, 27, 75, 0.12);

--testi-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}

.testi-page-wrapper {

overflow-x: hidden;

position: relative;

background: #F8FAFC;

}

.testi-bg-blob {

position: absolute;

border-radius: 50%;

filter: blur(120px);

opacity: 0.07;

pointer-events: none;

z-index: 0;

}

.testi-blob-1 {

width: 600px;

height: 600px;

background: #2563EB;

top: -150px;

left: -100px;

animation: testiFloat 14s ease-in-out infinite alternate;

}

.testi-blob-2 {

width: 500px;

height: 500px;

background: #8B5CF6;

bottom: 15%;

right: -100px;

animation: testiFloat 18s ease-in-out infinite alternate-reverse;

}

@keyframes testiFloat {

0% {

transform: translate(0, 0) scale(1);

}

100% {

transform: translate(50px, 40px) scale(1.1);

}

}

.testi-hero {

padding: 130px 0 80px;

background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 60%),

radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.05), transparent 60%),

#ffffff;

text-align: center;

border-bottom: 1px solid rgba(29, 78, 216, 0.05);

}

.testi-badge {

display: inline-flex;

align-items: center;

gap: 8px;

background: rgba(45, 106, 79, 0.08);

border: 1px solid rgba(45, 106, 79, 0.15);

border-radius: 30px;

padding: 6px 18px;

margin-bottom: 24px;

font-size: 0.78rem;

font-weight: 700;

color: var(--green, #2d6a4f);

text-transform: uppercase;

letter-spacing: 1.5px;

}

.testi-badge-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--green, #2d6a4f);

animation: testiPulse 1.8s infinite;

}

@keyframes testiPulse {

0% {

transform: scale(0.95);

box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.7);

}

70% {

transform: scale(1);

box-shadow: 0 0 0 8px rgba(45, 106, 79, 0);

}

100% {

transform: scale(0.95);

box-shadow: 0 0 0 0 rgba(45, 106, 79, 0);

}

}

.testi-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

line-height: 1.15;

color: #1E1B4B;

margin-bottom: 18px;

letter-spacing: -0.02em;

}

.testi-hero-desc {

font-size: 1.05rem;

color: var(--text-secondary, #475569);

line-height: 1.8;

max-width: 760px;

margin: 0 auto 30px;

}

.testi-trust-banner {

display: flex;

justify-content: center;

gap: 30px;

flex-wrap: wrap;

margin-top: 10px;

}

.testi-trust-item {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.9rem;

font-weight: 600;

color: #4B5563;

}

.testi-trust-item i {

color: #F59E0B;

font-size: 1rem;

}

.testi-trust-item strong {

color: #1D4ED8;

}

.testi-filter-sec {

padding: 40px 0 20px;

position: relative;

z-index: 10;

}

.testi-filter-bar {

display: flex;

justify-content: center;

gap: 12px;

flex-wrap: wrap;

background: #ffffff;

padding: 10px;

border-radius: 40px;

box-shadow: 0 4px 20px rgba(30, 27, 75, 0.04);

border: 1px solid rgba(29, 78, 216, 0.04);

max-width: 1080px;

margin: 0 auto;

}

.testi-filter-btn {

border: none;

background: transparent;

color: #4B5563;

font-weight: 600;

font-size: 0.9rem;

padding: 8px 24px;

border-radius: 30px;

cursor: pointer;

transition: var(--testi-transition);

}

.testi-filter-btn:hover {

color: #1D4ED8;

background: rgba(29, 78, 216, 0.05);

}

.testi-filter-btn.active {

background: var(--testi-grad-primary);

color: #ffffff;

box-shadow: 0 4px 15px rgba(29, 78, 216, 0.25);

}

.testi-grid-sec {

padding: 30px 0 80px;

}

.testi-grid {

position: relative;

transition: var(--testi-transition);

}

.testi-card-wrapper {

transition: all 0.4s ease;

}

.testi-card-wrapper.filtered-out {

opacity: 0;

transform: scale(0.8) translateY(20px);

pointer-events: none;

position: absolute;

visibility: hidden;

}

.testi-card {

background: #ffffff;

border-radius: 24px;

padding: 36px;

box-shadow: var(--testi-card-shadow);

border: 1px solid rgba(29, 78, 216, 0.04);

transition: var(--testi-transition);

position: relative;

height: 100%;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.testi-card:hover {

transform: translateY(-8px);

box-shadow: var(--testi-card-shadow-hover);

border-color: rgba(37, 99, 235, 0.1);

}

.testi-stars-row {

color: #F59E0B;

font-size: 0.95rem;

margin-bottom: 20px;

display: flex;

gap: 3px;

}

.testi-text,

bl-hero-desc {

font-size: 0.98rem;

color: #374151;

line-height: 1.8;

font-style: italic;

margin-bottom: 24px;

position: relative;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

.testi-text::before {

content: '“';

position: absolute;

top: -15px;

left: -12px;

font-size: 3.5rem;

color: rgba(29, 78, 216, 0.07);

line-height: 1;

}

.testi-client-profile {

display: flex;

align-items: center;

gap: 16px;

border-top: 1px solid #F1F5F9;

padding-top: 20px;

margin-top: auto;

}

.testi-avatar-box {

width: 52px;

height: 52px;

border-radius: 50%;

overflow: hidden;

border: 2px solid #ffffff;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

background: #E2E8F0;

flex-shrink: 0;

}

.testi-avatar-box img {

width: 100%;

height: 100%;

object-fit: cover;

}

.testi-info h5 {

font-size: 0.98rem;

font-weight: 700;

color: #1E1B4B;

margin-bottom: 2px;

display: flex;

align-items: center;

gap: 5px;

}

.testi-verified-badge {

color: #3B82F6;

font-size: 0.85rem;

}

.testi-info p {

font-size: 0.8rem;

color: var(--text-secondary, #475569);

margin-bottom: 0;

font-weight: 600;

}

.testi-brand-tag {

position: absolute;

top: 36px;

right: 36px;

font-size: 1.5rem;

color: rgba(29, 78, 216, 0.1);

transition: var(--testi-transition);

}

.testi-card:hover .testi-brand-tag {

color: rgba(29, 78, 216, 0.22);

transform: scale(1.1);

}

.testi-cat-badge {

position: absolute;

top: -12px;

left: 36px;

background: #F1F5F9;

color: #4B5563;

font-size: 0.72rem;

font-weight: 700;

padding: 4px 12px;

border-radius: 12px;

border: 1px solid rgba(29, 78, 216, 0.04);

text-transform: uppercase;

letter-spacing: 0.5px;

}

.testi-form-sec {

padding: 90px 0;

background: #ffffff;

border-top: 1px solid rgba(29, 78, 216, 0.05);

}

.testi-split-card {

background: linear-gradient(135deg, #EEF2FF 0%, #F5F8FF 100%);

border-radius: 32px;

overflow: hidden;

border: 1px solid rgba(29, 78, 216, 0.05);

box-shadow: 0 25px 55px rgba(30, 27, 75, 0.07);

}

.testi-form-info-side {

background: var(--testi-grad-dark);

color: #ffffff;

padding: 60px;

position: relative;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

}

.testi-form-info-side::before {

content: '';

position: absolute;

inset: 0;

background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);

background-size: 24px 24px;

pointer-events: none;

}

.testi-form-info-side h3 {

font-size: 2.2rem;

font-weight: 700;

line-height: 1.25;

margin-bottom: 20px;

color: #ffffff;

}

.testi-form-info-side p {

font-size: 1.05rem;

color: #93C5FD;

line-height: 1.75;

margin-bottom: 35px;

}

.testi-form-bullet {

display: flex;

gap: 16px;

margin-bottom: 24px;

}

.testi-bullet-icon {

width: 36px;

height: 36px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.08);

display: flex;

align-items: center;

justify-content: center;

color: #3B82F6;

flex-shrink: 0;

font-size: 0.95rem;

}

.testi-bullet-text h6 {

font-weight: 700;

margin-bottom: 4px;

color: #ffffff;

}

.testi-bullet-text p {

font-size: 0.85rem;

color: #93C5FD;

opacity: 0.8;

margin-bottom: 0;

}

.testi-form-side {

padding: 60px;

}

.testi-glass-form {

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.5);

border-radius: 24px;

padding: 40px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);

}

.form-group-custom {

margin-bottom: 20px;

}

.form-label-custom {

font-size: 0.85rem;

font-weight: 700;

color: #1E1B4B;

text-transform: uppercase;

letter-spacing: 0.5px;

margin-bottom: 8px;

display: block;

}

.form-control-custom {

width: 100%;

border: 2px solid #E2E8F0;

background: #ffffff;

border-radius: 14px;

padding: 12px 18px;

font-size: 0.95rem;

color: #1E1B4B;

outline: none;

transition: var(--testi-transition);

}

.form-control-custom:focus {

border-color: #3B82F6;

box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);

}

.star-rating-picker {

display: flex;

gap: 8px;

font-size: 1.5rem;

color: #CBD5E1;

cursor: pointer;

margin-top: 4px;

}

.star-rating-picker i {

transition: var(--testi-transition);

}

.star-rating-picker i:hover,

.star-rating-picker i.selected {

color: #F59E0B;

transform: scale(1.15);

}

.btn-submit-testi {

background: var(--testi-grad-primary);

color: #ffffff;

border: none;

font-weight: 700;

padding: 14px 32px;

border-radius: 50px;

cursor: pointer;

width: 100%;

transition: var(--testi-transition);

box-shadow: 0 6px 20px rgba(37, 99, 235, 0.2);

}

.btn-submit-testi:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);

}

.btn-submit-testi:active {

transform: translateY(0);

}

.testi-success-msg {

display: none;

text-align: center;

padding: 30px;

animation: testiFadeIn 0.5s ease forwards;

}

@keyframes testiFadeIn {

from {

opacity: 0;

transform: translateY(10px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

.testi-cta-sec {

padding: 90px 0;

background: #F8FAFC;

}

.testi-cta-box {

background: var(--testi-grad-primary);

border-radius: 30px;

padding: 60px;

color: #ffffff;

position: relative;

overflow: hidden;

box-shadow: 0 20px 40px rgba(29, 78, 216, 0.2);

}

.testi-cta-box::after {

content: '';

position: absolute;

width: 280px;

height: 280px;

background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);

bottom: -100px;

left: -60px;

border-radius: 50%;

}

.testi-cta-title {

font-size: 2.2rem;

font-weight: 700;

margin-bottom: 14px;

}

.testi-cta-desc {

font-size: 1.05rem;

color: rgba(255, 255, 255, 0.85);

max-width: 600px;

margin: 0 auto 30px;

line-height: 1.7;

}

@media (max-width: 991px) {

.testi-form-info-side {

padding: 40px;

}

.testi-form-side {

padding: 40px;

}

.testi-form-info-side h3 {

font-size: 1.8rem;

}

}

@media (max-width: 767px) {

.testi-hero {

padding: 100px 0 60px;

}

.testi-filter-bar {

border-radius: 20px;

padding: 6px;

}

.testi-filter-btn {

font-size: 0.85rem;

padding: 6px 16px;

}

.testi-form-side {

padding: 25px;

}

.testi-glass-form {

padding: 25px;

}

.testi-form-info-side {

padding: 40px 25px;

}

.testi-cta-box {

padding: 40px 20px;

}

.testi-cta-title {

font-size: 1.7rem;

}

}

/* ============================================================

DYNAMIC STYLE VARIABLES (GALLERY SPECIFIC)

============================================================ */

.gallery-page-wrapper {

overflow-x: hidden;

position: relative;

background: #F8FAFC;

padding-bottom: 90px;

}

/* Background blobs */

.gallery-bg-blob {

position: absolute;

border-radius: 50%;

filter: blur(120px);

opacity: 0.06;

pointer-events: none;

z-index: 0;

}

.gallery-blob-1 {

width: 600px;

height: 600px;

background: #2563EB;

top: -100px;

right: -100px;

animation: testiFloat 15s ease-in-out infinite alternate;

}

.gallery-blob-2 {

width: 500px;

height: 500px;

background: #8B5CF6;

bottom: 20%;

left: -100px;

animation: testiFloat 20s ease-in-out infinite alternate-reverse;

}

/* Hero Section */

.gallery-hero {

padding: 130px 0 60px;

background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.06), transparent 60%),

radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.04), transparent 60%),

#ffffff;

text-align: center;

border-bottom: 1px solid rgba(29, 78, 216, 0.05);

}

.gallery-badge {

display: inline-flex;

align-items: center;

gap: 8px;

background: rgba(37, 99, 235, 0.08);

border: 1px solid rgba(37, 99, 235, 0.15);

border-radius: 30px;

padding: 6px 18px;

margin-bottom: 24px;

font-size: 0.78rem;

font-weight: 700;

color: #2563EB;

text-transform: uppercase;

letter-spacing: 1.5px;

}

.gallery-badge-dot {

width: 8px;

height: 8px;

border-radius: 50%;

background: #2563EB;

animation: testiPulse 1.8s infinite;

}

.gallery-hero-title {

font-size: clamp(2rem, 3.2vw, 3.2rem);

font-weight: 700;

line-height: 1.15;

color: #1E1B4B;

margin-bottom: 18px;

letter-spacing: -0.02em;

}

.gallery-grad-text {

display: inline-block;

}

.gallery-hero-desc {

font-size: 1.05rem;

color: var(--text-secondary, #475569);

line-height: 1.8;

max-width: 760px;

margin: 0 auto;

}

/* Filter Bar */

.gallery-filter-sec {

padding: 40px 0 20px;

position: relative;

z-index: 10;

}

.gallery-filter-bar {

display: flex;

justify-content: center;

align-items: center;

gap: 12px;

flex-wrap: wrap;

background: #ffffff;

padding: 10px 24px;

border-radius: 40px;

box-shadow: 0 4px 20px rgba(30, 27, 75, 0.04);

border: 1px solid rgba(29, 78, 216, 0.04);

max-width: 900px;

margin: 0 auto;

}

.gallery-filter-btn {

border: none;

background: transparent;

color: #4B5563;

font-weight: 600;

font-size: 0.9rem;

padding: 8px 20px;

border-radius: 30px;

cursor: pointer;

transition: all 0.3s ease;

}

.gallery-filter-btn:hover {

color: #1D4ED8;

background: rgba(29, 78, 216, 0.05);

}

.gallery-filter-btn.active {

background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);

color: #ffffff;

box-shadow: 0 4px 15px rgba(29, 78, 216, 0.25);

}

.filter-divider {

color: #E2E8F0;

font-weight: 300;

font-size: 1.2rem;

margin: 0 4px;

}

/* Grid Cards */

.gallery-grid-sec {

padding: 30px 0 60px;

}

.gallery-item-wrapper {

transition: all 0.4s ease;

}

.gallery-item-wrapper.filtered-out {

opacity: 0;

transform: scale(0.8) translateY(20px);

pointer-events: none;

position: absolute;

visibility: hidden;

}

.gallery-item-card {

display: block;

background: #ffffff;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 8px 30px rgba(30, 27, 75, 0.04);

border: 1px solid rgba(29, 78, 216, 0.04);

transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

text-decoration: none;

}

.gallery-item-card:hover {

transform: translateY(-8px);

box-shadow: 0 20px 40px rgba(30, 27, 75, 0.1);

border-color: rgba(37, 99, 235, 0.1);

}

.gallery-media-box {

position: relative;

width: 100%;

height: 240px;

overflow: hidden;

background: #0f172a;

}

.gallery-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

}

.gallery-item-card:hover .gallery-img {

transform: scale(1.08);

}

/* Indicator type badges (Image vs Video) */

.gallery-type-badge {

position: absolute;

top: 16px;

left: 16px;

z-index: 5;

display: flex;

align-items: center;

gap: 6px;

padding: 6px 14px;

border-radius: 30px;

font-size: 0.72rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.5px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}

.gallery-type-badge.badge-image {

background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);

color: #1E1B4B;

}

.gallery-type-badge.badge-video {

background: linear-gradient(135deg, #047857 0%, #064E3B 100%);

color: #ffffff;

z-index: 10;

pointer-events: none;

}

/* Video Central Play button overlay */

.gallery-video-play-btn {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 60px;

height: 60px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.9);

display: flex;

align-items: center;

justify-content: center;

color: var(--green, #2d6a4f);

font-size: 1.5rem;

z-index: 4;

transition: all 0.3s ease;

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

pointer-events: none;

}

.gallery-video-play-btn i {

margin-left: 4px;

/* offset play icon center */

}

.gallery-item-card:hover .gallery-video-play-btn {

background: var(--green, #2d6a4f);

color: #ffffff;

transform: translate(-50%, -50%) scale(1.15);

box-shadow: 0 6px 25px rgba(45, 106, 79, 0.4);

}

/* Hover Zoom Magnifier / Play overlays */

.gallery-hover-overlay {

position: absolute;

inset: 0;

background: rgba(30, 27, 75, 0.4);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: all 0.4s ease;

z-index: 3;

}

.gallery-item-card:hover .gallery-hover-overlay {

opacity: 1;

}

.gallery-action-btn {

width: 50px;

height: 50px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.25);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

border: 1px solid rgba(255, 255, 255, 0.3);

display: flex;

align-items: center;

justify-content: center;

color: #ffffff;

font-size: 1.3rem;

transform: scale(0.8);

transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.gallery-item-card:hover .gallery-action-btn {

transform: scale(1);

}

/* Card details styling */

.gallery-info-box {

padding: 24px;

}

.gallery-item-cat {

font-size: 0.72rem;

font-weight: 700;

color: #2563EB;

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 6px;

display: block;

}

.gallery-item-title {

font-size: 1.1rem;

font-weight: 700;

color: #1E1B4B;

margin: 0;

line-height: 1.4;

}

.gallery-video-frame {
width: 100%;
height: 100%;
border: none;
}

.gallery-video-player {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Responsive layout adjustments */

@media (max-width: 991px) {

.gallery-hero {

padding: 100px 0 50px;

}

.gallery-filter-bar {

border-radius: 20px;

padding: 8px;

}

.gallery-filter-btn {

font-size: 0.85rem;

padding: 6px 14px;

}

.filter-divider {

display: none;

}

}

/* ============================================================

MATH CAPTCHA COMPONENT STYLING

============================================================ */

.ct-captcha-container {

display: flex;

flex-direction: column;

margin-bottom: 22px;

}

.ct-captcha-wrapper {

display: flex;

align-items: center;

justify-content: center !important;

gap: 12px;

background: #f8fafc;

border: 1px solid #e2e8f0;

border-radius: 12px;

padding: 10px 16px;

margin-bottom: 12px;

}

.ct-captcha-label {

font-size: 15px;

font-weight: 700;

color: #1e3a8a;

letter-spacing: 0.5px;

user-select: none;

}

.ct-captcha-refresh {

background: transparent;

border: none;

color: #64748b;

cursor: pointer;

font-size: 14px;

transition: all 0.25s ease;

padding: 2px;

}

.ct-captcha-refresh:hover {

color: #1d4ed8;

transform: rotate(180deg);

}

.p-captcha-wrapper {

display: flex;

align-items: center;

gap: 12px;

background: #f8fafc;

border: 1px solid rgba(29, 78, 216, 0.1);

border-radius: 14px;

padding: 10px 18px;

box-shadow: 0 2px 6px rgba(30, 27, 75, 0.02);

}

.p-captcha-label {

font-size: 15px;

font-weight: 700;

color: #1e1b4b;

letter-spacing: 0.5px;

user-select: none;

}

.p-captcha-refresh {

background: transparent;

border: none;

color: #64748b;

cursor: pointer;

font-size: 14px;

transition: all 0.25s ease;

padding: 2px;

}

.p-captcha-refresh:hover {

color: #2563eb;

transform: rotate(180deg);

}

/* ============================================================

UNIFORM BUTTON FONT SIZE

============================================================ */

button,

.btn,

.btn-red,

.btn-primary,

.btn-secondary,

.btnw,

.btn-play,

.btn-nav-outline,

.btn-sw-primary,

.btn-sw-outline,

.btn-sw-light,

.p-btn-primary,

.p-btn-outline-dark,

.btn-explore,

.btn-hiw-next,

.btn-gs,

.testi-filter-btn,

.feature-card-btn,

.nav-btn,

.social-btn,

.btn-light,

.btn-outline-primary,

.btn-outline-dark {

font-size: 0.95rem !important;

}

.bl-hero-desc,

.text-muted {

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

}

/* ============================================================

ACTIVE HEADER AND NAVIGATION STATES

============================================================ */

.nav-item.active>a,

.nav-item.active>button {

color: var(--primary) !important;

background: var(--sl100) !important;

font-weight: 600;

}

/* Active state for dropdown items with unique URLs */

.dropdown .dd-item.active {

background: var(--sl100);

border-color: rgba(29, 78, 216, 0.15);

}

.dropdown .dd-item.active .dd-title {

color: var(--primary);

}

/* Active state for mobile menu links */

.mob-menu a.active {

color: var(--primary) !important;

background: var(--sl100) !important;

}

/* Active state for Contact Us button */

.btn-gs.active,

.mob-gs.active {

background: var(--primary) !important;

box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35) !important;

}

/* ============================================================

NEW CUSTOM DEVELOPED STYLES FOR ABOUT & CLIENTS SECTIONS

============================================================ */

/* Redesigned Value Cards Extra Color Variations */

.about-val-icon-box.val-red {

background: rgba(239, 68, 68, 0.08);

color: #ef4444;

}

.about-val-icon-box.val-cyan {

background: rgba(6, 182, 212, 0.08);

color: #06b6d4;

}

.btn-sw-primary {
    background: var(--sw-gradient);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(29, 78, 216, 0.3);
}

.btn-sw-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.4);
    color: white;
}


/* Vision & Mission Split Layout Styles */

.about-vm-sec {

padding: 100px 0;

background: #ffffff;

position: relative;

}

.vm-visual-badge {

display: flex;

align-items: center;

gap: 16px;

background: rgba(37, 99, 235, 0.04);

border: 1px dashed rgba(37, 99, 235, 0.15);

border-radius: 16px;

padding: 20px;

margin-top: 30px;

}

.vm-badge-icon {

width: 48px;

height: 48px;

border-radius: 12px;

background: var(--about-grad-primary);

color: #ffffff;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.3rem;

flex-shrink: 0;

}

.vm-stack {

display: flex;

flex-direction: column;

gap: 24px;

}

.vm-item-card {

background: #ffffff;

border-radius: 24px;

padding: 35px;

border: 1px solid rgba(30, 27, 75, 0.04);

box-shadow: 0 10px 30px rgba(30, 27, 75, 0.04);

display: flex;

gap: 24px;

align-items: flex-start;

transition: var(--about-transition);

position: relative;

}

.vm-item-card::after {

content: '';

position: absolute;

inset: 0;

border-radius: 24px;

padding: 1px;

background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(139, 92, 246, 0.15));

-webkit-mask-composite: xor;

mask-composite: exclude;

opacity: 0;

transition: var(--about-transition);

pointer-events: none;

}

.vm-item-card:hover {

transform: translateY(-5px) translateX(5px);

box-shadow: 0 20px 40px rgba(30, 27, 75, 0.08);

border-color: transparent;

}

.vm-item-card:hover::after {

opacity: 1;

}

.vm-item-icon-box {

width: 60px;

height: 60px;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.6rem;

flex-shrink: 0;

transition: var(--about-transition);

}

.vm-item-icon-box.v-blue {

background: rgba(29, 78, 216, 0.07);

color: #1D4ED8;

}

.vm-item-icon-box.v-purple {

background: rgba(139, 92, 246, 0.07);

color: #8B5CF6;

}

.vm-item-card:hover .vm-item-icon-box {

transform: scale(1.1) rotate(5deg);

}

.vm-item-content h4 {

font-size: 1.4rem;

font-weight: 700;

color: #1E1B4B;

margin-bottom: 10px;

}

.vm-item-content p {

font-size: 0.98rem;

color: #4B5563;

line-height: 1.75;

text-align: justify;

text-justify: inter-word;

-webkit-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

word-spacing: -1px;

margin-bottom: 0;

}

@media (max-width: 768px) {

.vm-item-card {

flex-direction: column;

gap: 16px;

padding: 30px;

}

}

/* Why Choose Us Redesign Styles */

.why-item-modern {

background: #ffffff;

border: 1.5px solid var(--cl-slate-mid, #e2e8f0);

border-radius: 18px;

padding: 20px;

display: flex;

align-items: center;

gap: 16px;

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

height: 100%;

box-shadow: 0 4px 12px rgba(30, 27, 75, 0.02);

}

.why-item-modern:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(30, 27, 75, 0.07);

border-color: rgba(29, 78, 216, 0.15);

}

.why-item-icon-box {

width: 48px;

height: 48px;

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.35rem;

flex-shrink: 0;

transition: all 0.3s ease;

}

.why-item-modern:hover .why-item-icon-box {

transform: scale(1.1);

}

.why-item-text {

font-size: 0.92rem;

font-weight: 700;

color: #1e293b;

line-height: 1.4;

}

/* Icon color variations */

.why-icon-ai {

background: rgba(139, 92, 246, 0.08);

color: #8b5cf6;

}

.why-icon-enterprise {

background: rgba(59, 130, 246, 0.08);

color: #3b82f6;

}

.why-icon-automation {

background: rgba(16, 185, 129, 0.08);

color: #10b981;

}

.why-icon-apps {

background: rgba(6, 182, 212, 0.08);

color: #06b6d4;

}

.why-icon-rd {

background: rgba(236, 72, 153, 0.08);

color: #ec4899;

}

.why-icon-security {

background: rgba(239, 68, 68, 0.08);

color: #ef4444;

}

.why-icon-consulting {

background: rgba(245, 158, 11, 0.08);

color: #f59e0b;

}

.why-icon-engineering {

background: rgba(79, 70, 229, 0.08);

color: #4f46e5;

}

.why-icon-outcomes {

background: rgba(16, 185, 129, 0.08);

color: #10b981;

}

.why-icon-partnership {

background: rgba(29, 78, 216, 0.08);

color: #1d4ed8;

}

/* ============================================================

FLOATING CHAT WIDGETS (WHATSAPP & AI CHAT) WITH PULSE WAVES

============================================================ */

.floating-chat-container {

position: fixed;

right: 25px;

bottom: 96px;

display: flex;

flex-direction: column;

gap: 18px;

z-index: 99999;

/* Higher z-index to show above other content */

pointer-events: none;

/* Let clicks pass through empty space */

}

.floating-chat-btn {

pointer-events: auto;

/* Enable clicks on the buttons */

width: 60px;

height: 60px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #ffffff !important;

font-size: 1.7rem;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

position: relative;

text-decoration: none !important;

outline: none;

}

.floating-chat-btn.chat-wa {

background: #25D366;

}

.floating-chat-btn.chat-ai {

background: linear-gradient(135deg, #1D4ED8 0%, #8B5CF6 100%);

}

/* Hover effects */

.floating-chat-btn:hover {

transform: scale(1.1) translateY(-3px);

box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

}

.floating-chat-btn i {

z-index: 3;

transition: transform 0.3s ease;

}

.floating-chat-btn:hover i {

transform: scale(1.1) rotate(5deg);

}

/* Ripple/Wave Pulse Animations */

.floating-chat-btn .pulse-wave {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

border-radius: 50%;

z-index: 1;

opacity: 0;

pointer-events: none;

}

.floating-chat-btn.chat-wa .pulse-wave {

background: rgba(37, 211, 102, 0.4);

animation: chatPulseWA 2.4s infinite ease-out;

}

.floating-chat-btn.chat-ai .pulse-wave {

background: rgba(139, 92, 246, 0.4);

animation: chatPulseAI 2.4s infinite ease-out;

}

/* Offset the second wave */

.floating-chat-btn .pulse-wave:nth-child(2) {

animation-delay: 1.2s;

}

@keyframes chatPulseWA {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(1.8);

opacity: 0;

}

}

@keyframes chatPulseAI {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(1.8);

opacity: 0;

}

}

/* Responsiveness */

@media (max-width: 768px) {

.floating-chat-container {

right: 15px;

bottom: 20px;

gap: 12px;

}

.floating-chat-btn {

width: 50px;

height: 50px;

font-size: 1.4rem;

}

}

/* ============================================================

ENTERPRISE HERO SLIDER (ALIGNED WITH CUSTOME.CSS :ROOT THEME)

============================================================ */

.hero-slider.microlan-hero {

position: relative !important;

width: 100% !important;

min-height: 82vh !important;

overflow: hidden !important;

background: radial-gradient(circle at 70% 45%, rgba(30, 58, 138, 0.88) 0%, rgba(14, 28, 64, 0.96) 55%, #030B17 100%), url('../img/background/b_one.webp') center/cover no-repeat !important;

display: flex !important;

flex-direction: column !important;

justify-content: center !important;

padding-top: 110px !important;

padding-bottom: 75px !important;

box-sizing: border-box !important;

}

/* Ambient Lighting Glow Shapes */

.hero-ambient-shape {

position: absolute;

border-radius: 50%;

pointer-events: none;

z-index: 1;

filter: blur(85px);

opacity: 0.28;

}

.shape-top-right {

width: 540px;

height: 540px;

top: -120px;

right: -80px;

background: radial-gradient(circle, var(--secondary) 0%, var(--primary) 45%, transparent 70%);

}

.shape-bottom-left {

width: 480px;

height: 480px;

bottom: -100px;

left: -100px;

background: radial-gradient(circle, var(--navy) 0%, var(--sl800) 55%, transparent 70%);

}

/* Slides Track (Hardware-Accelerated Carousel Engine) */

.hero-slider.microlan-hero .slides-track {

position: relative !important;

display: flex !important;

width: 100% !important;

height: 100% !important;

transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;

will-change: transform !important;

z-index: 2;

}

/* Individual Slide (Isolated coordinate plane, zero ghosting) */

.hero-slider.microlan-hero .slide {

position: relative !important;

inset: auto !important;

flex: 0 0 100% !important;

width: 100% !important;

min-width: 100% !important;

max-width: 100% !important;

height: 100% !important;

display: flex !important;

align-items: center !important;

padding: 0 4% !important;

box-sizing: border-box !important;

opacity: 0 !important;

visibility: hidden !important;

pointer-events: none !important;

transform: scale(0.97) !important;

transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s !important;

}

.hero-slider.microlan-hero .slide.active {

opacity: 1 !important;

visibility: visible !important;

pointer-events: auto !important;

transform: scale(1) !important;

}

/* 2-Column Responsive Layout Grid (Reduced Gap) */

.hero-slider.microlan-hero .slide-inner {

max-width: 1220px;

width: 100%;

margin: 0 auto;

display: grid;

grid-template-columns: 1.15fr 0.85fr;

gap: 24px;

align-items: center;

position: relative;

z-index: 5;

}

/* Left Content Column */

.slide-content {

display: flex;

flex-direction: column;

align-items: flex-start;

text-align: left;

}

/* Frosted Pill Badge */

.hero-tag-badge {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 7px 18px;

border-radius: 9999px;

background: rgba(29, 78, 216, 0.18);

border: 1.5px solid rgba(96, 165, 250, 0.35);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

color: #93C5FD;

font-size: 0.78rem;

font-weight: 700;

letter-spacing: 0.08em;

text-transform: uppercase;

margin-bottom: 20px;

box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);

}

/* Hero Headline */

/* Paragraph Description */

/* Action Buttons */

.hero-actions {

display: flex;

align-items: center;

gap: 16px;

flex-wrap: wrap;

}

.btn-action-primary {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

padding: 13px 30px;

background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

color: #FFFFFF !important;

font-size: 0.98rem;

font-weight: 700;

border-radius: 8px;

border: none;

text-decoration: none;

box-shadow: 0 8px 24px rgba(29, 78, 216, 0.45);

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

cursor: pointer;

}

.btn-action-primary:hover {

background: linear-gradient(135deg, #1e40af 0%, var(--primary) 100%);

transform: translateY(-2px);

box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6);

color: #FFFFFF !important;

}

.btn-action-primary svg {

transition: transform 0.25s ease;

}

.btn-action-primary:hover svg {

transform: translateX(4px);

}

.btn-action-outline {

display: inline-flex;

align-items: center;

justify-content: center;

padding: 12px 28px;

background: rgba(15, 23, 42, 0.55);

border: 1.5px solid rgba(255, 255, 255, 0.35);

color: #FFFFFF !important;

font-size: 0.98rem;

font-weight: 600;

border-radius: 8px;

text-decoration: none;

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

cursor: pointer;

}

.btn-action-outline:hover {

background: rgba(37, 99, 235, 0.2);

border-color: #93C5FD;

color: #FFFFFF !important;

transform: translateY(-2px);

box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);

}

/* Right Column — Floating Card */

.hero-card-col {

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.hero-image-card {

position: relative;

width: 100%;

max-width: 480px;

border-radius: 20px;

overflow: visible;

box-shadow:

0 30px 70px -10px rgba(0, 0, 0, 0.65),

0 0 0 1.5px rgba(255, 255, 255, 0.18);

transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.hero-image-card:hover {

transform: translateY(-4px);

box-shadow:

0 38px 80px -10px rgba(0, 0, 0, 0.75),

0 0 0 1.5px rgba(147, 197, 253, 0.45);

}

.card-media {

border-radius: 20px;

overflow: hidden;

height: 330px;

background: #0B192C;

position: relative;

}

.card-media img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

filter: brightness(0.96) contrast(1.05);

}

/* Overlapping Top-Right Badge */

.card-badge {

position: absolute;

top: -14px;

right: 20px;

z-index: 10;

display: inline-flex;

align-items: center;

gap: 7px;

padding: 7px 18px;

background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

color: #FFFFFF;

font-weight: 700;

font-size: 0.85rem;

border-radius: 8px;

box-shadow: 0 8px 22px rgba(29, 78, 216, 0.5);

letter-spacing: 0.02em;

white-space: nowrap;

}

.card-badge svg {

color: #FFFFFF;

fill: #FFFFFF;

}

/* Bottom Controls Wrapper (Dashes + Controls) */

.hero-controls-bar {

position: absolute;

bottom: 30px;

left: 0;

width: 100%;

z-index: 25;

pointer-events: none;

}

.hero-controls-inner {

max-width: 1320px;

width: 100%;

margin: 0 auto;

padding: 0 5%;

display: flex;

align-items: center;

justify-content: flex-start;

gap: 16px;

}

.hero-dashes {

display: inline-flex;

align-items: center;

gap: 8px;

pointer-events: auto;

}

.dash-dot {

height: 5px;

width: 22px;

background: rgba(255, 255, 255, 0.32);

border-radius: 3px;

border: none;

cursor: pointer;

transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

padding: 0;

}

.dash-dot:hover {

background: rgba(255, 255, 255, 0.65);

}

.dash-dot.active {

width: 44px;

background: var(--secondary);

box-shadow: 0 0 14px rgba(37, 99, 235, 0.85);

}

/* Circular Side Navigation Arrows */

.hero-nav-arrow {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 46px;

height: 46px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.12);

border: 1px solid rgba(255, 255, 255, 0.22);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

color: #FFFFFF;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

z-index: 25;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}

.hero-nav-arrow:hover {

background: var(--secondary);

border-color: var(--secondary);

color: #FFFFFF;

transform: translateY(-50%) scale(1.08);

box-shadow: 0 10px 28px rgba(37, 99, 235, 0.6);

}

.arrow-prev {

left: 24px;

}

.arrow-next {

right: 24px;

}

/* Progress strip */

.slide-progress {

position: absolute;

bottom: 0;

left: 0;

width: 0%;

height: 4px;

background: linear-gradient(90deg, var(--primary), var(--secondary), #60A5FA);

z-index: 20;

}

/* Responsive Design */

@media (max-width: 1199px) {

.hero-slider.microlan-hero .slide-inner {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}

.slide-content {
align-items: center;
text-align: center;
}

.hero-slider.microlan-hero .hero-desc {
text-align: center !important;
margin: 0 auto 24px auto !important;
max-width: 620px;
}

.hero-actions {
justify-content: center;
}

.hero-controls-inner {
justify-content: center;
}

.hero-nav-arrow {
top: auto;
bottom: 22px;
transform: none;
width: 38px;
height: 38px;
pointer-events: auto;
}

.hero-nav-arrow:hover {
transform: scale(1.08);
}

.arrow-prev {
left: calc(50% - 130px);
}

.arrow-next {
right: calc(50% - 130px);
}

}

@media (max-width: 767.98px) {

.hero-slider.microlan-hero {
--hero-pt: 92px;
--hero-pb: 50px;
padding-top: 92px !important;
padding-bottom: 50px !important;
min-height: 580px !important;
height: auto !important;
overflow: visible !important;
overflow-x: clip !important;
display: flex !important;
flex-direction: column !important;
}

.hero-slider.microlan-hero .slides-track {
min-height: 520px !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
align-items: flex-start !important;
display: flex !important;
width: 100% !important;
}

.hero-slider.microlan-hero .slide {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 500px !important;
height: auto !important;
padding: 0 16px !important;
align-items: center !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}

.hero-slider.microlan-hero .slide.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: scale(1) !important;
}

.hero-slider.microlan-hero .slide-inner {
grid-template-columns: 1fr !important;
gap: 20px !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-sizing: border-box !important;
}

.slide-content {
align-items: center !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
}

 

.hero-slider.microlan-hero .hero-desc {
font-size: var(--text-hero-desc);
line-height: var(--text-hero-desc-lh);
margin: 0 auto 20px auto !important;
text-align: center !important;
max-width: 95% !important;
overflow-wrap: break-word;
word-break: break-word;
}

.hero-actions {
width: 100%;
max-width: 320px;
margin: 0 auto 22px auto;
flex-direction: column;
gap: 10px;
align-items: stretch;
justify-content: center;
}

.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
justify-content: center;
text-align: center;
padding: 12px 18px;
font-size: 0.92rem;
box-sizing: border-box;
}

.hero-nav-arrow {
display: none !important;
}

.hero-controls-bar {
position: absolute;
bottom: 16px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 25 !important;
}

}


/* ============================================================
   MAGNIFIC POPUP GALLERY PREVIEW & RESPONSIVE CLOSE BUTTON
   ============================================================ */

.mfp-bg {
  z-index: 100000 !important;
  background: rgba(11, 22, 41, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0.95 !important;
}

.mfp-wrap {
  z-index: 100001 !important;
}

.mfp-container {
  padding: 0 16px !important;
}

/* Prominent, stylish, accessible Close ("X" / Cross) Button */
button.mfp-close,
.mfp-close,
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close,
.mfp-figure .mfp-close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  width: 48px !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100010 !important;
  opacity: 1 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  text-decoration: none !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

button.mfp-close i,
.mfp-close i,
.mfp-image-holder .mfp-close i {
  font-size: 20px !important;
  line-height: 1 !important;
  color: inherit !important;
  pointer-events: none !important;
  display: inline-block !important;
}

button.mfp-close:hover,
.mfp-close:hover,
.mfp-image-holder .mfp-close:hover,
.mfp-iframe-holder .mfp-close:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border-color: #EF4444 !important;
  transform: scale(1.08) rotate(90deg) !important;
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.45) !important;
}

button.mfp-close:active,
.mfp-close:active {
  transform: scale(0.94) !important;
}

/* Ensure image holder does not override position or width */
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  width: 48px !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Navigation arrows styling inside preview */
.mfp-arrow {
  z-index: 100005 !important;
  opacity: 0.85 !important;
  transition: all 0.25s ease !important;
}

.mfp-arrow:hover {
  opacity: 1 !important;
}

/* Image preview styling */
.mfp-figure {
  border-radius: 14px;
}

.mfp-figure img.mfp-img {
  padding: 40px 0 40px !important;
  border-radius: 8px !important;
}

.mfp-bottom-bar {
  margin-top: -30px !important;
  color: #F8FAFC !important;
}

/* Responsive Close Button for Tablet & Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  button.mfp-close,
  .mfp-close,
  .mfp-image-holder .mfp-close,
  .mfp-iframe-holder .mfp-close,
  .mfp-figure .mfp-close {
    top: 16px !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 22px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  }

  button.mfp-close i,
  .mfp-close i,
  .mfp-image-holder .mfp-close i {
    font-size: 17px !important;
  }

  .mfp-figure img.mfp-img {
    padding: 30px 0 30px !important;
  }
}

/* Extra-Small Mobile Screens (<= 420px) */
@media (max-width: 420px) {
  button.mfp-close,
  .mfp-close,
  .mfp-image-holder .mfp-close,
  .mfp-iframe-holder .mfp-close,
  .mfp-figure .mfp-close {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 20px !important;
  }

  button.mfp-close i,
  .mfp-close i,
  .mfp-image-holder .mfp-close i {
    font-size: 15px !important;
  }
}
.testi-stars-row .star-empty {
    color: #cbd5e1;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  color: #fff;
  background: #1e3a8a;
  border-radius: 4px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}