/* IT Signature Custom Redesign CSS */

/* Reserve icon space before FontAwesome CSS loads (prevents CLS) */
.fa-solid,
.fa-brands,
.fas,
.fab,
.far,
[class*="fa-"]:not(link) {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Screen-reader only labels (A11y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reset button styles for nav/close buttons converted from div/span */
button.nav-btn,
button.close-popup,
button.popup-close,
button.cv-popup-close,
button#modal-close,
button#closeChat,
button#closeBtn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:root {
    /* IT Signature Brand Unified Blue Palette */
    --primary-color: #00a8ec;
    --primary-hover: #0086be;
    --primary-gradient: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    --navy-dark: #06152d;
    --navy-mid: #0a1f44;
    --navy-surface: rgba(10, 31, 68, 0.7);
    --blue-accent: #00d2ff;
    --blue-light: #e0f2fe;
    --text-dark: #1e293b;
    --text-muted: #475569;
    --bg-nav: #f8f9fa;
    --border-light: #e2e8f0;
    --font-family: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    margin: 0;
    padding-top: 65px;
    background-color: #ffffff;
}

/* Smooth Marquee Hardware Acceleration */
.vt-card,
.client-scroll-track,
.icard-track,
.major-clients-track,
.award-logo-track,
.ts-track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fast-Scroll Lookahead Lazy Load Rendering */
img {
    content-visibility: visible;
}

/* ============================================ */
/* SMOOTH SCROLL RENDERING (Zero Flashing/Lag)  */
/* ============================================ */
.cv-auto,
.section-client-logos,
.icard-section,
.talented-clients-section,
.ts-section,
.cv-section,
.environment-section,
.rise-section,
.smart-pos-section,
.vm-accordion-section,
.map-container12,
.price-container,
.order-section,
.clients-fluid-section,
.anniversary-section,
.smart-card-section,
.hello2121,
.image-description-section,
.analytics-section,
.hellosection,
.business-owners-section,
.what-you-create-section,
.milestones-section,
.parent-student-section,
.hero12-split,
.lets-connect-banner {
    content-visibility: visible;
}

/* ============================================ */
/* ============================================ */
/* SECTION 1: Custom Top Navbar                 */
/* ============================================ */
.navbar-custom {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 168, 236, 0.15);
    padding: 12px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    box-shadow: 0 4px 25px rgba(0, 168, 236, 0.06);
    transition: padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Animated Top Gradient Glow Border */
.navbar-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00a8ec, #0052cc, #7c3aed, #00a8ec);
    background-size: 300% 100%;
    animation: navTopGradient 4s linear infinite;
    z-index: 1051;
}

@keyframes navTopGradient {
    0% {
        background-position: 0% 0%;
    }

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

/* Scrolled Navbar Floating Glassmorphism State */
.navbar-custom.scrolled {
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px -8px rgba(0, 168, 236, 0.22), 0 4px 20px rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 168, 236, 0.3);
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Brand Logo & Flag (Unified Inline Flex) */
.navbar-brand-custom {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.navbar-brand-custom:hover {
    transform: scale(1.03);
}

.navbar-logo-img {
    height: 34px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
}

.navbar-brand-custom:hover .navbar-logo-img {
    filter: drop-shadow(0 2px 10px rgba(0, 168, 236, 0.35));
}

.flag-img {
    width: 52px;
    height: auto;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.navbar-brand-custom:hover .flag-img {
    transform: rotate(6deg) scale(1.05);
}

/* Nav Menu Items */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item-custom {
    position: relative;
}

.nav-link-custom {
    color: #1e293b;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 20px;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

/* Subtle Hover Pill & Lift Effect */
.nav-link-custom:hover {
    color: #00a8ec !important;
    background: rgba(0, 168, 236, 0.08);
    transform: translateY(-2px);
}

/* Animated Glow Underline Bar */
.nav-link-custom::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0%;
    height: 2.5px;
    background: #00A8EC;
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-50%);
    box-shadow: 0 2px 6px rgba(0, 168, 236, 0.4);
}

.nav-link-custom:hover::after,
.nav-link-custom.active::after {
    width: 60%;
}

.nav-link-custom.active {
    color: #00A8EC !important;
    font-weight: 700;
}

.nav-link-custom.highlight {
    color: #00A8EC !important;
    font-weight: 700;
}

/* Chevron Arrow Rotate Animation for Dropdown */
.nav-item-custom.dropdown .fa-chevron-down {
    font-size: 11px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.nav-item-custom.dropdown:hover .fa-chevron-down {
    transform: rotate(180deg);
    color: #00a8ec;
}

/* Dropdown Menu (Shop) */
.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(14px) scale(0.96);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    width: 550px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 168, 236, 0.16), 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border: 1px solid rgba(0, 168, 236, 0.2);
    margin-top: 10px;
}

.nav-item-custom.dropdown:hover .dropdown-menu-custom,
.nav-item-custom.dropdown.show .dropdown-menu-custom {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-section-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
}

.dropdown-card-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.25s ease;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.dropdown-card-item:hover {
    background: rgba(0, 168, 236, 0.06);
    border-color: rgba(0, 168, 236, 0.2);
    transform: translateX(4px);
}

.dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e0f2fe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.dropdown-card-item:hover .dropdown-icon {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(0, 168, 236, 0.35);
}

.dropdown-card-text strong {
    display: block;
    font-size: 13.5px;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.2;
}

.dropdown-card-text p {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
    line-height: 1.3;
}

.dropdown-footer-link {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    text-align: right;
}

.dropdown-footer-link a {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.dropdown-footer-link a:hover {
    text-decoration: underline;
}

/* Right Section: Phone & Hamburger */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.phone-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #0084ff 0%, #005ce6 50%, #0044cc 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 20.5px;
    text-decoration: none !important;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 18px rgba(0, 102, 255, 0.38), 0 0 0 0 rgba(0, 102, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap !important;
    flex-shrink: 0;
    animation: phonePulseHighlight 3s infinite ease-in-out;
}

/* Shimmer Light Beam Effect across pill continuously */
.phone-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-25deg);
    animation: phoneShimmerPass 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes phoneShimmerPass {

    0%,
    25% {
        left: -120%;
    }

    60%,
    100% {
        left: 180%;
    }
}

.phone-link span {
    letter-spacing: 0.3px;
    white-space: nowrap !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Hover State */
.phone-link:hover {
    background: linear-gradient(135deg, #0099ff 0%, #0066ff 50%, #003db3 100%);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 28px rgba(0, 102, 255, 0.6), 0 0 20px rgba(0, 168, 236, 0.4);
    transform: translateY(-2.5px) scale(1.04);
}

.phone-link i {
    font-size: 13.5px;
    color: #ffffff !important;
    display: inline-block;
    animation: phoneRing 3.2s ease-in-out infinite;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.phone-link:hover i {
    color: #ffffff !important;
    animation: none;
    transform: scale(1.25) rotate(-12deg);
}

/* Pulse Highlight Animation */
@keyframes phonePulseHighlight {

    0%,
    100% {
        box-shadow: 0 4px 18px rgba(0, 102, 255, 0.38), 0 0 0 0 rgba(0, 102, 255, 0.5);
    }

    50% {
        box-shadow: 0 6px 24px rgba(0, 102, 255, 0.55), 0 0 0 8px rgba(0, 102, 255, 0);
    }
}

/* Animations */
@keyframes phoneRing {

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

    8%,
    24% {
        transform: rotate(15deg) scale(1.15);
    }

    16%,
    32% {
        transform: rotate(-15deg) scale(1.15);
    }

    40% {
        transform: rotate(0deg) scale(1);
    }
}

/* Mobile Toggle & Drawer */
.mobile-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-hamburger:hover,
.mobile-hamburger:active {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.mobile-hamburger span {
    width: 17px;
    height: 2px;
    background-color: #0b1c3f;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 28, 63, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1150;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    background: #ffffff;
    z-index: 1200;
    box-shadow: -6px 0 25px rgba(11, 28, 63, 0.15);
    transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
}

.mobile-drawer.active {
    right: 0;
}

.mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 16px;
}

.mobile-drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dark);
    line-height: 1;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-list li {
    margin-bottom: 14px;
}

.mobile-nav-list a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    display: block;
}

@media (max-width: 991.98px) {
    .navbar-custom {
        padding: 8px 0;
    }

    .navbar-container {
        padding: 0 12px;
        flex-wrap: nowrap !important;
    }

    .navbar-links {
        display: none;
    }

    .navbar-brand-custom {
        gap: 6px;
        flex-wrap: nowrap !important;
        flex-shrink: 0;
    }

    .navbar-logo-img {
        height: 25px;
        max-width: 110px;
    }

    .flag-img {
        width: 51px;
    }

    .navbar-right {
        gap: 8px;
        flex-wrap: nowrap !important;
        flex-shrink: 0;
    }

    .phone-link {
        padding: 4px 10px;
        font-size: 14.5px;
        font-weight: 700;
        gap: 6px;
        height: 33px;
        white-space: nowrap !important;
    }

    .phone-link span {
        font-size: 14.5px;
        letter-spacing: 0.2px;
    }

    .phone-link i {
        font-size: 12px;
    }

    .mobile-hamburger {
        display: flex;
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
}

@media (max-width: 400px) {
    .navbar-container {
        padding: 0 8px;
    }

    .navbar-logo-img {
        height: 22px;
        max-width: 95px;
    }

    .flag-img {
        width: 46px;
    }

    .navbar-brand-custom {
        gap: 4px;
    }

    .navbar-right {
        gap: 5px;
    }

    .phone-link {
        padding: 3px 8px;
        font-size: 13.5px;
        font-weight: 700;
        gap: 4px;
        height: 31px;
    }

    .phone-link span {
        font-size: 13.5px;
    }

    .phone-link i {
        font-size: 11px;
    }

    .mobile-hamburger {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 340px) {
    .phone-link span {
        display: none;
    }

    .phone-link {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
    }
}

/* ============================================ */
/* SECTION 2: ERP System Tuition Class Banner   */
/* ============================================ */
.erp-section-wrapper {
    padding: 23px 0 24px 0;
}

.erp-header-block {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.erp-top-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.erp-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(0, 168, 236, 0.08) 0%, rgba(2, 59, 158, 0.05) 100%);
    border: 1px solid rgba(0, 168, 236, 0.28);
    color: #0077b6;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    box-shadow: 0 2px 10px rgba(0, 168, 236, 0.08);
}

.erp-badge-dot {
    width: 7px;
    height: 7px;
    background-color: #00a8ec;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(0, 168, 236, 0.85);
    animation: erpPulseDot 2s infinite ease-in-out;
}

.erp-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #059669;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

@keyframes erpPulseDot {

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

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

.erp-section-title {
    margin: 0;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.erp-title-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.erp-tag-chip {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 6px 18px;
    border-radius: 12px;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
    box-shadow: 0 6px 20px rgba(0, 168, 236, 0.3);
    transition: transform 0.2s ease;
}

.erp-tag-chip:hover {
    transform: translateY(-2px);
}

.erp-connector-word {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: #64748b;
    font-weight: 700;
    font-size: clamp(17px, 2vw, 24px);
    letter-spacing: -0.01em;
}

.erp-title-main-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.erp-hero-gradient-text {
    font-family: 'Outfit', 'Plus Jakarta Sans', 'Bricolage Grotesque', sans-serif;
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 1;
    background: linear-gradient(135deg, #0f172a 0%, #023b9e 45%, #00a8ec 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    filter: drop-shadow(0 4px 16px rgba(0, 168, 236, 0.18));
}

.erp-badge-floating {
    background: linear-gradient(135deg, #dc0043 0%, #ff1744 100%);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(220, 0, 67, 0.35);
    display: inline-flex;
    align-items: center;
    transform: rotate(-2deg);
}

/* Outer Wrapper for popping teacher image */
.erp-card-outer-wrapper {
    position: relative;
    width: 100%;
    margin-top: 35px;
}

/* Main Blue Card Background */
.erp-card-bg {
    position: relative;
    background: url('img/tankbgblue.webp') center/cover no-repeat;
    border-radius: 16px;
    min-height: 315px;
    padding: 30px 36px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Card Content Left Area */
.erp-card-content {
    max-width: 60%;
    z-index: 2;
    position: relative;
}

.erp-card-heading {
    color: #ffffff;
    font-size: 52px;
    font-weight: 900;
    margin: 0;
    line-height: 2.05;
    text-shadow: 0 3px 12px rgb(0, 0, 0);
    letter-spacing: 0.5px;
}

.erp-card-desc {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin: 8px 0 20px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    line-height: 1.35;
}

.talk-expert-pill {
    display: inline-block;
    background-color: #ffffff;
    color: #242729;
    font-size: 13.5px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    margin-top: 32px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.erp-bottom-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.avatars-group {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    margin-left: -12px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.avatar-circle:first-child {
    margin-left: 0;
}

.phone-pill-btn {
    background-color: #dc0043;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    padding: 8px 28px;
    border-radius: 35px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(220, 0, 67, 0.45);
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin-left: 8px;
}

.phone-pill-btn:hover {
    background-color: #b50036;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Option 1 Modern Card Design (index2.html) */
.erp-card-bg-v2 {
    position: relative;
    background: radial-gradient(circle at 75% 35%, rgba(0, 168, 236, 0.4) 0%, rgba(2, 59, 158, 0.88) 45%, #031b4e 100%),
        linear-gradient(135deg, #031b4e 0%, #003399 50%, #002266 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    min-height: 330px;
    padding: 36px 42px;
    box-shadow: 0 20px 45px rgba(2, 40, 115, 0.28), 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

/* Semi-Transparent Colombo / Sri Lanka Landmark Watermark Overlay */
.erp-card-bg-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('img/tankbgblue.webp') center/cover no-repeat;
    opacity: 0.35;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
    border-radius: 22px;
}

.erp-card-bg-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
    border-radius: 22px;
}

.erp-teacher-halo {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.32) 0%, rgba(0, 82, 204, 0.12) 50%, transparent 70%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 1;
}

.erp-card-content-v2 {
    max-width: 60%;
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.erp-card-tag-v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.erp-card-heading-v2 {
    color: #ffffff;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    margin: 0 0 10px 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.erp-card-heading-v2 span {
    color: #00d2ff;
}

.erp-card-desc-v2 {
    color: #e2e8f0;
    font-size: 15.5px;
    font-weight: 400;
    margin: 0 0 18px 0;
    line-height: 1.55;
    max-width: 520px;
}

.erp-chips-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.erp-chips-subrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.erp-card-slogan-overlay {
    display: none;
}

.erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 168, 236, 0.18);
    border: 1px solid rgba(0, 168, 236, 0.38);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

.erp-chip i {
    color: #00d2ff;
    font-size: 11px;
}

.erp-action-bar-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    max-width: 60%;
    margin-top: 14px;
}

.erp-buttons-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.erp-avatars-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.erp-avatars-group-v2 {
    display: flex;
    align-items: center;
}

.erp-avatar-v2 {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    margin-left: -10px;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.erp-avatar-v2:first-child {
    margin-left: 0;
}

.erp-support-label {
    display: flex;
    flex-direction: column;
}

.erp-support-label strong {
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
}

.erp-support-label span {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
}

.phone-pill-btn-v2 {
    background: linear-gradient(135deg, #dc0043 0%, #ff1744 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(220, 0, 67, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.phone-pill-btn-v2:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(220, 0, 67, 0.6);
}

.whatsapp-pill-btn-v2 {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s ease;
}

.whatsapp-pill-btn-v2:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5);
}

/* Floating Large Teacher Image & Glow */
.erp-teacher-img-wrap {
    position: absolute;
    right: -10px;
    bottom: 0;
    height: 150%;
    max-height: 490px;
    width: auto;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}

.erp-teacher-ambient-glow {
    display: none;
}

.erp-card-teacher-img {
    height: 100%;
    max-height: 490px;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.32));
}

.erp-support-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.erp-support-online-dot {
    width: 7px;
    height: 7px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    display: inline-block;
    animation: liveDotPulse 1.8s infinite;
}

@keyframes liveDotPulse {

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

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

@media (max-width: 1199px) {
    .erp-teacher-img-wrap {
        height: 118%;
        max-height: 405px;
        right: -15px;
    }

    .erp-card-teacher-img {
        opacity: 0.95;
    }

    .erp-card-content-v2 {
        max-width: 62%;
    }
}

@media (max-width: 991px) {
    .erp-teacher-img-wrap {
        height: 108%;
        max-height: 350px;
        right: -20px;
    }

    .erp-card-teacher-img {
        opacity: 0.9;
    }

    .erp-card-content-v2 {
        max-width: 68%;
    }
}

/* Responsive Mobile Layout */
@media (max-width: 768px) {
    .erp-header-block {
        margin-bottom: 16px;
        gap: 8px;
        text-align: center;
        align-items: center;
    }

    .erp-top-meta-row {
        display: none !important;
    }

    .erp-badge-pill {
        font-size: 11px;
        padding: 4px 12px;
    }

    .erp-verified-tag {
        font-size: 10.5px;
        padding: 4px 10px;
    }

    .erp-section-title {
        align-items: center;
        text-align: center;
    }

    .erp-title-row {
        justify-content: center;
        gap: 8px;
    }

    .erp-tag-chip {
        font-size: 14px;
        padding: 4px 12px;
    }

    .erp-connector-word {
        font-size: 15px;
    }

    .erp-title-main-row {
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .erp-hero-gradient-text {
        font-size: 28px;
    }

    .erp-badge-floating {
        font-size: 10.5px;
        padding: 3px 8px;
    }

    .erp-card-outer-wrapper {
        overflow: hidden;
        border-radius: 26px;
        width: 100%;
        margin-top: 15px;
        box-shadow: 0 16px 45px rgba(0, 40, 140, 0.28);
    }

    .erp-card-bg-v2 {
        min-height: auto !important;
        padding: 24px 16px 22px 16px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border-radius: 26px !important;
        background: radial-gradient(circle at 50% 0%, #0091ff 0%, #004ecc 45%, #002277 85%, #001344 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
        overflow: hidden !important;
        box-shadow: 0 16px 40px rgba(0, 30, 120, 0.35) !important;
    }

    .erp-card-bg-v2::after {
        opacity: 0.22 !important;
        border-radius: 26px !important;
    }

    .erp-card-content-v2 {
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        z-index: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .erp-card-tag-v2 {
        margin: 0 auto 10px auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(0, 225, 255, 0.35) !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        padding: 5px 14px !important;
        border-radius: 50px !important;
        backdrop-filter: blur(8px) !important;
    }

    .erp-card-heading-v2 {
        font-size: 23px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 auto 8px auto !important;
        color: #ffffff !important;
        letter-spacing: -0.02em !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }

    .erp-card-heading-v2 span {
        display: block !important;
        color: #38bdf8 !important;
        background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        text-shadow: 0 4px 18px rgba(34, 211, 238, 0.35);
    }

    .erp-card-desc-v2 {
        font-size: 12.5px !important;
        max-width: 95% !important;
        margin: 0 auto 12px auto !important;
        line-height: 1.5 !important;
        text-align: center !important;
        color: #bae6fd !important;
        font-weight: 400 !important;
    }

    .erp-chips-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 auto 14px auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .erp-chip {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: rgba(0, 20, 60, 0.45) !important;
        border: 1px solid rgba(0, 210, 255, 0.4) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 9.5px !important;
        font-weight: 600 !important;
        padding: 4px 7px !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 4px 12px rgba(0, 20, 80, 0.25) !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
        flex-shrink: 0 !important;
    }

    .erp-chip i {
        color: #38bdf8 !important;
        font-size: 9.5px !important;
    }

    .erp-teacher-img-wrap {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 2px auto 14px auto !important;
        z-index: 2 !important;
    }

    .erp-teacher-ambient-glow {
        display: block !important;
        position: absolute;
        width: 190px;
        height: 190px;
        background: radial-gradient(circle, rgba(0, 210, 255, 0.28) 0%, rgba(0, 102, 255, 0.08) 60%, transparent 80%);
        filter: blur(25px);
        pointer-events: none;
        z-index: 1;
        border-radius: 50%;
    }

    .erp-card-teacher-img {
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 200px !important;
        max-width: 250px !important;
        object-fit: contain !important;
        object-position: center !important;
        z-index: 2 !important;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4)) !important;
    }

    .erp-action-bar-v2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .erp-buttons-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        max-width: 340px !important;
        gap: 8px !important;
        position: relative !important;
        z-index: 3 !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .phone-pill-btn-v2 {
        background: linear-gradient(135deg, #ff1744 0%, #d50000 100%) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        padding: 10px 10px !important;
        width: 100% !important;
        justify-content: center !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(213, 0, 0, 0.4) !important;
        letter-spacing: 0.1px !important;
        gap: 6px !important;
    }

    .phone-pill-btn-v2 i {
        font-size: 13px !important;
    }

    .whatsapp-pill-btn-v2 {
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        padding: 10px 10px !important;
        width: 100% !important;
        justify-content: center !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35) !important;
        letter-spacing: 0.1px !important;
        gap: 6px !important;
    }

    .whatsapp-pill-btn-v2 i {
        font-size: 14px !important;
    }

    .erp-avatars-wrap {
        position: relative !important;
        z-index: 3 !important;
        width: auto !important;
        margin: 2px auto 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
        display: inline-flex !important;
        gap: 10px !important;
        background: rgba(0, 18, 55, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 50px !important;
        padding: 5px 14px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    }

    .erp-avatar-v2 {
        width: 32px !important;
        height: 32px !important;
        border: 1.8px solid #ffffff !important;
        margin-left: -8px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    }

    .erp-support-label strong {
        font-size: 11.5px !important;
        color: #ffffff !important;
        font-weight: 800 !important;
    }

    .erp-support-label span {
        font-size: 9.5px !important;
        color: #7dd3fc !important;
    }

    .erp-card-slogan-overlay {
        display: none !important;
    }

    .erp-teacher-halo {
        display: none;
    }
}

@media (max-width: 480px) {
    .erp-card-bg-v2 {
        padding: 20px 14px 18px 14px !important;
    }

    .erp-hero-gradient-text {
        font-size: 25px;
    }

    .erp-card-heading-v2 {
        font-size: 21px !important;
    }

    .erp-card-desc-v2 {
        font-size: 12px !important;
    }

    .erp-chips-row {
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    .erp-chip {
        font-size: 9px !important;
        padding: 4px 5px !important;
        gap: 3px !important;
        letter-spacing: -0.3px !important;
    }

    .erp-chip i {
        font-size: 8.5px !important;
    }

    .erp-card-teacher-img {
        max-height: 180px !important;
        max-width: 220px !important;
    }

    .phone-pill-btn-v2,
    .whatsapp-pill-btn-v2 {
        font-size: 12px !important;
        padding: 9px 6px !important;
    }

    .erp-support-label strong {
        font-size: 11px !important;
    }

    .erp-support-label span {
        font-size: 9px !important;
    }
}

/* ============================================ */
/* SECTION 3: Video Testimonial Project Slider  */
/* ============================================ */
.section-video-testimonials {
    padding: 25px 0 20px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f0f8ff 0%, #e2f1fd 35%, #edf6fc 70%, #ffffff 100%);
    border-top: 1px solid rgba(0, 168, 236, 0.12);
    border-bottom: 1px solid rgba(0, 168, 236, 0.12);
}

.video-testimonials-heading {
    position: relative;
    z-index: 3;
    margin-bottom: 18px;
    text-align: center;
}

.video-testimonials-heading .tp-badge {
    background: rgba(0, 168, 236, 0.08) !important;
    border: 1px solid rgba(0, 168, 236, 0.28) !important;
    color: #0088cc !important;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 10px rgba(0, 168, 236, 0.08);
    margin-bottom: 12px;
}

.video-testimonials-heading .tp-badge i {
    color: #eab308 !important;
}

.video-testimonials-heading h2 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-size: clamp(2rem, 3.2vw, 2.65rem) !important;
    font-weight: 800 !important;
    color: #0b1c3f !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0;
    text-shadow: none !important;
}

.video-testimonials-heading h2 span {
    color: #00a8ec !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    display: inline;
    font-weight: 800 !important;
}

.video-testimonials-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px !important;
    color: #64748b !important;
    max-width: 720px;
    margin: 10px auto 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

/* Filter Pills Header (matching Mockup Image 2) */
.vt-filter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 20px;
    margin-bottom: 8px;
    width: 100%;
}

.vt-filter-pills-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 820px;
    z-index: 5;
    padding: 0 10px;
}

.vt-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(0, 168, 236, 0.22);
    color: #0b1c3f;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 168, 236, 0.06);
    outline: none;
}

.vt-filter-pill:hover {
    background: rgba(0, 168, 236, 0.08);
    border-color: #00a8ec;
    color: #0088cc;
    transform: translateY(-1px);
}

.vt-filter-pill.active {
    background: #00a8ec !important;
    color: #ffffff !important;
    border-color: #00a8ec !important;
    box-shadow: 0 4px 14px rgba(0, 168, 236, 0.35);
    transform: translateY(-1px);
}

.vt-filter-pill i {
    color: #00a8ec;
    font-size: 13px;
    transition: color 0.2s ease;
}

.vt-filter-pill.active i {
    color: #ffffff !important;
}

.vt-floating-note {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.vt-floating-note span {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0284c7;
    line-height: 1.25;
}

.vt-floating-note.note-left {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

.vt-floating-note.note-right {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    flex-direction: row-reverse;
}

.vt-sketch-arrow-left,
.vt-sketch-arrow-right {
    width: 38px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 1080px) {
    .vt-floating-note {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .vt-filter-pills-wrap {
        gap: 6px;
    }

    .vt-filter-pill {
        padding: 5px 12px;
        font-size: 11px;
        gap: 5px;
    }

    .vt-filter-pill i {
        font-size: 11px;
    }
}

.website-heading-wrapper {
    text-align: center;
    margin: 20px auto;
}

.website-heading-wrapper.text-start,
.website-heading-wrapper.text-left {
    text-align: left;
}

.website-heading-wrapper h1,
.website-heading-wrapper h2,
.website-heading-wrapper h3 {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(1.85rem, 2.7vw, 2.45rem) !important;
    font-weight: 800 !important;
    color: var(--text-dark, #0b1c3f) !important;
    line-height: 1.25 !important;
    margin-bottom: 0;
    letter-spacing: -0.02em !important;
}

.website-heading-wrapper h1 span,
.website-heading-wrapper h2 span,
.website-heading-wrapper h3 span {
    color: var(--primary-color, #00a8ec) !important;
    font-weight: 800 !important;
}

.website-heading-wrapper p {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    color: var(--text-muted, #475569);
    max-width: 850px;
    margin: 12px auto 0 auto;
    line-height: 1.65;
}

.website-heading-wrapper.text-start p,
.website-heading-wrapper.text-left p {
    margin-left: 0;
}

.website-heading-wrapper.light-text h1,
.website-heading-wrapper.light-text h2,
.website-heading-wrapper.light-text h3 {
    color: #ffffff !important;
}

.website-heading-wrapper.light-text p {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .website-heading-wrapper {
        margin-bottom: 24px;
        padding: 0 10px;
    }

    .website-heading-wrapper h1,
    .website-heading-wrapper h2,
    .website-heading-wrapper h3 {
        font-size: clamp(1.45rem, 5.2vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 480px) {
    .website-heading-wrapper {
        margin-bottom: 18px;
        padding: 0 4px;
    }

    .website-heading-wrapper h1,
    .website-heading-wrapper h2,
    .website-heading-wrapper h3 {
        font-size: clamp(1.35rem, 5.6vw, 1.55rem) !important;
        line-height: 1.25 !important;
    }
}

/* ============================================ */
/* SECTION 3: 3D Center-Focused Video Carousel  */
/* ============================================ */
.vt-rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 15px 0;
    position: relative;
}

.vt-carousel {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 45px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.vt-carousel:active,
.vt-carousel.is-dragging {
    cursor: grabbing;
}

.vt-carousel.is-dragging .vt-card {
    transition: none !important;
}

/* Navigation Arrows */
.vt-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 168, 236, 0.3);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0b1c3f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 70;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    outline: none;
}

.vt-arrow:hover {
    background: #00a8ec;
    color: #ffffff;
    border-color: #00a8ec;
    box-shadow: 0 8px 24px rgba(0, 168, 236, 0.35);
    transform: translateY(-50%) scale(1.1);
}

.vt-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.vt-arrow-prev {
    left: 8px;
}

.vt-arrow-next {
    right: 8px;
}

/* Stage & Track */
.vt-stage {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0 30px 0;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 97%, transparent 100%);
}

.vt-track {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 400px;
    transform-style: flat;
}

/* Individual 3D Card */
.vt-card {
    position: absolute;
    width: 250px;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background-color: #0b1426;
    background-size: cover;
    background-position: center top;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1.5px solid rgba(0, 168, 236, 0.2);
    transition: opacity 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    transform-style: flat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform, left;
}

.vt-card:hover {
    border-color: rgba(0, 168, 236, 0.6);
}

/* Card Shade Overlay - Lighter gradient so background videos stay colorful */
.vt-card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(11, 28, 63, 0.90) 0%,
            rgba(11, 28, 63, 0.35) 30%,
            transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Play Button — visible on the 3 focused cards */
.vt-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #00a8ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-left: 3px;
    z-index: 5;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    pointer-events: none;
}

/* Card Info */
.vt-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 10px 10px;
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vt-card-name {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    min-height: 27px;
}

.vt-card-location {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    font-size: 9.5px;
    color: #38bdf8;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.vt-card-location i {
    color: #38bdf8;
    font-size: 8.5px;
    flex-shrink: 0;
}

/* ============================================ */
/* 3 MAIN FOCUSED CARDS (Center, Left, Right)   */
/* All 3 are equally large, clear, glowing, and fully focused! */
/* ============================================ */
.vt-card.vt-focus,
.vt-card.vt-active {
    border-color: rgba(0, 168, 236, 0.95);
    border-width: 2px;
    box-shadow:
        0 22px 55px rgba(0, 168, 236, 0.38),
        0 8px 24px rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    cursor: pointer;
}

.vt-card.vt-focus .vt-card-play,
.vt-card.vt-active .vt-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.96);
    color: #00a8ec;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.vt-card.vt-focus:hover .vt-card-play,
.vt-card.vt-active:hover .vt-card-play {
    transform: translate(-50%, -50%) scale(1.14);
    background: #00a8ec;
    color: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 168, 236, 0.6);
}

.vt-card.vt-focus .vt-card-name,
.vt-card.vt-active .vt-card-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    min-height: 36px;
    color: #ffffff;
}

.vt-card.vt-focus .vt-card-location,
.vt-card.vt-active .vt-card-location {
    font-size: 11.5px;
    color: #38bdf8;
}

.vt-card.vt-focus .vt-card-badge,
.vt-card.vt-active .vt-card-badge {
    display: inline-block;
}

.vt-card.vt-focus .vt-card-info,
.vt-card.vt-active .vt-card-info {
    padding: 16px 14px 14px;
    background: linear-gradient(0deg, rgba(8, 15, 30, 0.95) 0%, rgba(8, 15, 30, 0.72) 65%, transparent 100%);
}

/* 3D Card Duration Badge */
.vt-card-duration {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(11, 20, 38, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 4;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Active Card Quote Overlay (matching Mockup Image 2) */
.vt-card-quote {
    display: none;
    position: absolute;
    bottom: 58px;
    left: 12px;
    right: 12px;
    z-index: 4;
    background: rgba(11, 28, 63, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 168, 236, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: vtFadeIn 0.3s ease;
}

@keyframes vtFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.vt-card-quote p {
    font-size: 11.5px;
    color: #f1f5f9;
    margin: 0;
    font-style: italic;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.vt-card.vt-active .vt-card-quote {
    display: block;
}

.vt-card-subline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.vt-card-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 1.5px 6.5px;
    border-radius: 999px;
    background: rgba(0, 168, 236, 0.9);
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    display: none;
    line-height: 1.15;
}

.vt-card.vt-active .vt-card-badge {
    display: inline-block;
}

.vt-card-badge.tag-teacher {
    background: rgba(37, 99, 235, 0.9);
    color: #ffffff;
}

.vt-card-badge.tag-institute {
    background: rgba(13, 148, 136, 0.9);
    color: #ffffff;
}

.vt-card-badge.tag-master {
    background: rgba(124, 58, 237, 0.9);
    color: #ffffff;
}

/* Section Bridge / Visual Sub-Heading */
.vt-section-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 850px;
    margin: 14px auto 10px auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

.vt-bridge-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(0, 168, 236, 0.35), transparent);
}

.vt-bridge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 168, 236, 0.25);
    color: #0088cc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 168, 236, 0.08);
    white-space: nowrap;
}

.vt-bridge-pill i {
    color: #00a8ec;
    font-size: 13px;
}

@media (max-width: 640px) {
    .vt-bridge-pill {
        font-size: 10px;
        padding: 4px 12px;
        gap: 6px;
    }

    .vt-bridge-pill i {
        font-size: 11px;
    }

    .vt-card-quote {
        display: none !important;
    }
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .vt-carousel {
        padding: 0 35px;
    }

    .vt-card,
    .vt-card.vt-focus,
    .vt-card.vt-active {
        width: 220px;
        height: 340px;
    }

    .vt-track {
        min-height: 360px;
    }
}

@media (max-width: 991px) {
    .vt-carousel {
        padding: 0 30px;
    }

    .vt-card,
    .vt-card.vt-focus,
    .vt-card.vt-active {
        width: 190px;
        height: 300px;
        border-radius: 16px;
    }

    .vt-track {
        min-height: 320px;
    }

    .vt-card-name {
        font-size: 10px;
        min-height: 24px;
    }

    .vt-card.vt-focus .vt-card-name,
    .vt-card.vt-active .vt-card-name {
        font-size: 12px;
        min-height: 31px;
    }

    .vt-card-location {
        font-size: 8.5px;
    }

    .vt-card.vt-focus .vt-card-location,
    .vt-card.vt-active .vt-card-location {
        font-size: 10px;
    }

    .vt-card-play {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .vt-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .vt-carousel {
        padding: 0 24px;
    }

    .vt-stage {
        padding: 10px 0 20px 0;
    }

    .vt-card,
    .vt-card.vt-focus,
    .vt-card.vt-active {
        width: 150px;
        height: 245px;
        border-radius: 14px;
    }

    .vt-track {
        min-height: 260px;
    }

    .vt-card-info {
        padding: 6px 6px 8px;
    }

    .vt-card.vt-focus .vt-card-info,
    .vt-card.vt-active .vt-card-info {
        padding: 10px 10px 10px;
    }

    .vt-card-name {
        font-size: 8.5px;
        min-height: 20px;
    }

    .vt-card.vt-focus .vt-card-name,
    .vt-card.vt-active .vt-card-name {
        font-size: 10.5px;
        min-height: 26px;
    }

    .vt-card-location {
        font-size: 7.5px;
        gap: 3px;
    }

    .vt-card.vt-focus .vt-card-location,
    .vt-card.vt-active .vt-card-location {
        font-size: 8.5px;
    }

    .vt-card-location i {
        font-size: 7px;
    }

    .vt-card-play {
        width: 32px;
        height: 32px;
        font-size: 13px;
        padding-left: 2px;
    }

    .vt-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .vt-arrow-prev {
        left: 4px;
    }

    .vt-arrow-next {
        right: 4px;
    }
}

@media (max-width: 480px) {
    .vt-carousel {
        padding: 0 16px;
    }

    .vt-card,
    .vt-card.vt-focus,
    .vt-card.vt-active {
        width: 120px;
        height: 195px;
        border-radius: 12px;
    }

    .vt-track {
        min-height: 220px;
    }

    .vt-card-info {
        padding: 4px 4px 6px;
    }

    .vt-card.vt-focus .vt-card-info,
    .vt-card.vt-active .vt-card-info {
        padding: 6px 6px 8px;
    }

    .vt-card-name {
        font-size: 7.5px;
        min-height: 18px;
    }

    .vt-card.vt-focus .vt-card-name,
    .vt-card.vt-active .vt-card-name {
        font-size: 9px;
        min-height: 22px;
    }

    .vt-card-location {
        font-size: 6.8px;
    }

    .vt-card.vt-focus .vt-card-location,
    .vt-card.vt-active .vt-card-location {
        font-size: 7.5px;
    }

    .vt-card-location i {
        font-size: 6px;
    }

    .vt-card-play {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .vt-arrow {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }
}

/* ============================================ */
/* SECTION 3.1: Mini Video Rows (poiwala line dekak) */
/* ============================================ */
.vt-mini-showcase {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    position: relative;
}

.vt-mini-row-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 6px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 1) 97%, transparent 100%);
    touch-action: pan-y;
}

.vt-mini-row-wrap.is-dragging {
    cursor: grabbing;
}

.vt-mini-track {
    display: flex;
    gap: 14px;
    align-items: stretch;
    width: max-content;
    will-change: transform;
}

.vt-mini-card {
    flex: 0 0 166px;
    width: 166px;
    height: 230px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: #0b1426;
    border: 1.5px solid rgba(0, 168, 236, 0.22);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.vt-mini-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(0, 168, 236, 0.7);
    box-shadow: 0 12px 28px rgba(0, 168, 236, 0.28), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.vt-mini-card-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    overflow: hidden;
}

.vt-mini-duration {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(11, 20, 38, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    z-index: 4;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.vt-mini-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(11, 24, 52, 0.98) 0%,
            rgba(11, 24, 52, 0.72) 42%,
            rgba(0, 0, 0, 0.1) 75%,
            transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.vt-mini-play {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #00a8ec;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding-left: 2px;
    z-index: 4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.vt-mini-card:hover .vt-mini-play {
    transform: translate(-50%, -50%) scale(1.12);
    background: #00a8ec;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 168, 236, 0.5);
}

.vt-mini-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 9px 9px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: linear-gradient(0deg, rgba(8, 15, 30, 0.96) 0%, rgba(8, 15, 30, 0.72) 65%, transparent 100%);
}

.vt-mini-name {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    word-break: break-word;
    min-height: 24px;
}

.vt-mini-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.vt-mini-loc {
    font-size: 7.8px;
    color: #38bdf8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    min-width: 0;
    flex: 1;
}

.vt-mini-loc i {
    font-size: 6.8px;
    flex-shrink: 0;
}

.vt-mini-loc-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.vt-mini-tag {
    font-size: 6.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    padding: 1px 4.5px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.15;
}

.vt-mini-tag.tag-teacher {
    background: rgba(37, 99, 235, 0.9);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.vt-mini-tag.tag-institute {
    background: rgba(13, 148, 136, 0.9);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.vt-mini-tag.tag-master {
    background: rgba(124, 58, 237, 0.9);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Bottom Action & Annotation */
.vt-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 24px;
    margin-bottom: 24px;
}

.vt-btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00a8ec 0%, #0077b6 100%);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 20px rgba(0, 168, 236, 0.32);
    transition: all 0.28s ease;
}

.vt-btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 168, 236, 0.48);
    color: #ffffff !important;
}

.vt-btn-view-all i {
    font-size: 14px;
}

.vt-success-annotation {
    position: absolute;
    right: calc(50% - 360px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0284c7;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    pointer-events: none;
}

.vt-annotation-arrow {
    width: 38px;
    height: 26px;
    flex-shrink: 0;
}

/* Trust Stats Bar */
.vt-trust-container {
    margin-top: 10px;
    margin-bottom: 20px;
}

.vt-trust-stats-bar {
    background: #ffffff;
    border: 1.5px solid rgba(0, 168, 236, 0.18);
    border-radius: 20px;
    padding: 16px 28px;
    box-shadow: 0 10px 30px rgba(0, 168, 236, 0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.vt-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vt-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 168, 236, 0.1);
    color: #0088cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vt-stat-info {
    display: flex;
    flex-direction: column;
}

.vt-stat-num {
    font-size: 19px;
    font-weight: 800;
    color: #0b1c3f;
    line-height: 1.2;
    font-family: 'Bricolage Grotesque', sans-serif;
}

.vt-stat-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
}

.vt-stat-sub {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 500;
}

/* Responsive Rules for Mini Video Rows */
@media (max-width: 991px) {
    .vt-mini-card {
        flex: 0 0 150px;
        width: 150px;
        height: 210px;
    }

    .vt-mini-name {
        font-size: 9px;
        min-height: 22px;
    }

    .vt-mini-loc {
        font-size: 7.2px;
    }

    .vt-mini-tag {
        font-size: 6px;
        padding: 1px 4px;
    }

    .vt-trust-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px 20px;
    }

    .vt-success-annotation {
        display: none;
    }
}

@media (max-width: 768px) {
    .vt-mini-card {
        flex: 0 0 136px;
        width: 136px;
        height: 190px;
    }

    .vt-mini-name {
        font-size: 8.5px;
        min-height: 20px;
    }

    .vt-mini-loc {
        font-size: 6.8px;
    }

    .vt-mini-tag {
        font-size: 5.5px;
        padding: 0.8px 3.5px;
    }

    .vt-trust-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px 20px;
    }

    .vt-success-annotation {
        display: none;
    }
}

@media (max-width: 500px) {
    .vt-mini-showcase {
        gap: 8px;
    }

    .vt-mini-row-wrap {
        padding: 3px 0;
    }

    .vt-mini-track {
        gap: 7px;
    }

    .vt-mini-card {
        flex: 0 0 102px;
        width: 102px;
        height: 145px;
        border-radius: 10px;
        border-width: 1px;
    }

    .vt-mini-info {
        padding: 3px 4px 5px;
        gap: 1.5px;
    }

    .vt-mini-name {
        font-size: 7.5px;
        line-height: 1.15;
        min-height: 17px;
    }

    .vt-mini-meta {
        gap: 2px;
    }

    .vt-mini-loc {
        font-size: 6px;
        gap: 1.5px;
    }

    .vt-mini-loc i {
        font-size: 5px;
    }

    .vt-mini-tag {
        font-size: 5px;
        padding: 0.5px 3px;
        line-height: 1.1;
    }

    .vt-mini-duration {
        font-size: 7px;
        padding: 1px 4px;
        top: 4px;
        right: 4px;
        border-radius: 4px;
    }

    .vt-mini-play {
        width: 22px;
        height: 22px;
        font-size: 8px;
        top: 36%;
    }

    .vt-trust-stats-bar {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
    }

    .vt-btn-view-all {
        font-size: 12px;
        padding: 9px 18px;
    }
}

@media (max-width: 370px) {
    .vt-mini-card {
        flex: 0 0 86px;
        width: 86px;
        height: 126px;
        border-radius: 9px;
    }

    .vt-mini-track {
        gap: 6px;
    }

    .vt-mini-name {
        font-size: 7px;
        min-height: 15px;
    }

    .vt-mini-loc {
        font-size: 5.5px;
    }

    .vt-mini-tag {
        font-size: 4.8px;
        padding: 0.5px 2.5px;
    }
}

/* Video Modal Popup */
#videoPopup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#videoPopup iframe {
    width: 88vw;
    max-width: 900px;
    height: 80vh;
    max-height: 520px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.close-popup {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 36px;
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.close-popup:hover {
    transform: scale(1.2);
    color: var(--primary-color);
}

/* ============================================ */
/* SECTION 5: Individual Customer Cards (icard) */
/* ============================================ */
.icard-section {
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
    padding-bottom: 45px;
}

.icard-slider {
    overflow: visible;
    width: 100%;
    position: relative;
    height: 280px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.icard-slider:active,
.icard-slider.is-dragging {
    cursor: grabbing;
}

.icard-slider#row2,
.icard-slider#row3 {
    margin-top: 15px;
}

.icard-track {
    display: flex;
    gap: 0;
    width: max-content;
    will-change: transform;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

.icard-item {
    width: 356px;
    height: 280px;
    flex: 0 0 auto;
    cursor: pointer;
    perspective: 1200px;
    margin-right: -90px;
    user-select: none;
    -webkit-user-select: none;
}

.icard-flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.icard-item:hover .icard-flip {
    transform: rotateY(180deg) translateY(-8px);
}

.icard-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 112%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible;
}

.icard-front {
    z-index: 2;
}

.icard-back {
    transform: rotateY(180deg);
}

.icard-face img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    user-select: none;
    transition: transform 0.3s ease;
}

.icard-back img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    user-select: none;
}

@media (max-width: 1200px) {
    .icard-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .icard-slider {
        height: 240px;
    }

    .icard-slider#row2,
    .icard-slider#row3 {
        margin-top: 12px;
    }

    .icard-item {
        width: 442px;
        height: 240px;
        margin-right: -45px;
    }
}

@media (max-width: 768px) {
    .icard-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .icard-slider {
        height: 180px;
    }

    .icard-slider#row2,
    .icard-slider#row3 {
        margin-top: 8px;
    }

    .icard-item {
        width: 195px;
        height: 180px;
        margin-right: -30px;
    }
}

.image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
}

.image-popup.active {
    display: flex;
    opacity: 1;
}

.image-popup img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: auto;
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 50px;
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
    outline: none;
    z-index: 1000000;
}

.popup-close:hover {
    transform: scale(1.2);
    color: var(--primary-color, #0d6efd);
}

/* ============================================ */
/* SECTION 6: Talented Clients Logo Grid        */
/* ============================================ */
.talented-clients-section {
    background-color: #fff;
    color: var(--text-dark);
    padding: 40px 0 20px 0;
    max-width: 100%;
}

.talented-clients-explore {
    text-align: right;
    margin-top: 18px;
}

.talented-clients-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.talented-clients-explore-link:hover {
    color: var(--primary-dark, #0088cc);
    transform: translateX(4px);
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

@media (max-width: 1200px) {
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .talented-clients-section {
        padding: 30px 0 10px 0;
    }

    .talented-clients-explore {
        text-align: right;
        margin-top: 22px;
        margin-bottom: 5px;
    }

    .talented-clients-explore-link {
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .logo-grid div img {
        max-height: 48px !important;
        width: auto !important;
    }

    .logo-grid div {
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .logo-grid div img {
        max-height: 42px !important;
    }

    .talented-clients-explore {
        text-align: right;
        margin-top: 18px;
    }

    .talented-clients-explore-link {
        font-size: 0.9rem;
    }
}

/* ============================================ */
/* ============================================ */
/* SECTION 7: Testimonials Slider (2 per view)  */
/* ============================================ */
.ts-section {
    overflow: hidden;
    padding: 35px 0 25px 0;
    position: relative;
}

@media (max-width: 768px) {
    .ts-section {
        padding: 25px 0 20px 0;
    }
}

.ts-nav-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ts-nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #0b1c3f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 3px 10px rgba(11, 28, 63, 0.06);
    outline: none;
}

.ts-nav-arrow:hover {
    background: #0b1c3f;
    color: #D4AF37;
    border-color: #0b1c3f;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 28, 63, 0.16);
}

.ts-nav-arrow:active {
    transform: translateY(0) scale(0.95);
}

.ts-slider-wrapper {
    position: relative;
    width: 100%;
}

.ts-viewport {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    padding: 20px 0 10px 0;
}

.ts-viewport:active {
    cursor: grabbing;
}

.ts-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.ts-slide {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.ts-card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 380px;
    background-color: #f4f4f6;
    border-radius: 32px;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
}

.ts-card:hover {
    box-shadow: 0 8px 26px rgba(11, 28, 63, 0.08);
}

.ts-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 28px 24px;
    max-width: 58%;
    z-index: 2;
    height: 100%;
    flex: 1;
}

.ts-card-logo {
    height: 75px;
    max-height: 82px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

.ts-card-text {
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.75;
    text-align: justify;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ts-card-author-wrap {
    margin-top: 6px;
}

.ts-card-author {
    font-size: 17px;
    font-weight: 700;
    color: #0b1c3f;
    line-height: 1.3;
}

.ts-card-title {
    font-size: 13px;
    color: #b8860b;
    margin-top: 3px;
    font-weight: 500;
}

.ts-portrait {
    position: absolute;
    right: -8px;
    bottom: 0;
    height: 350px;
    width: 280px;
    object-fit: contain;
    object-position: bottom right;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
}

/* Mobile header & portrait elements (hidden on desktop) */
.ts-card-header-mobile {
    display: none;
}

.ts-portrait-mobile {
    display: none;
}

/* Dots indicator */
.ts-dots-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
}

.ts-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    outline: none;
}

.ts-dot:hover {
    background: #94a3b8;
}

.ts-dot.active {
    width: 26px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b1c3f 0%, #1e3a8a 100%);
    box-shadow: 0 2px 8px rgba(11, 28, 63, 0.25);
}

/* Responsive */
@media (max-width: 1200px) {
    .ts-card-content {
        max-width: 56%;
        padding: 24px 20px;
    }

    .ts-portrait {
        width: 250px;
        height: 320px;
        right: -6px;
    }

    .ts-card-text {
        font-size: 13px;
        line-height: 1.7;
    }

    .ts-card-logo {
        height: 65px;
        max-height: 72px;
        max-width: 190px;
    }
}

@media (max-width: 991px) {
    .ts-slide {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0 8px;
    }

    .ts-card {
        min-height: 340px;
        border-radius: 28px;
    }

    .ts-card-content {
        max-width: 56%;
        padding: 24px 22px;
    }

    .ts-portrait {
        width: 270px;
        height: 330px;
        right: 0;
    }

    .ts-card-logo {
        height: 72px;
        max-height: 80px;
        max-width: 210px;
    }
}

@media (max-width: 600px) {
    .ts-viewport {
        padding: 40px 0 10px 0;
    }

    .ts-slide {
        padding: 0 4px;
    }

    .ts-card {
        flex-direction: column;
        align-items: center;
        min-height: auto;
        padding: 58px 18px 22px 18px;
        margin-top: 75px;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 24px rgba(11, 28, 63, 0.06);
    }

    .ts-card-header-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -72px;
        left: 0;
        right: 0;
        z-index: 5;
    }

    .ts-avatar-wrap {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: flex-end;
        width: 125px;
        height: 125px;
    }

    .ts-portrait-mobile {
        display: block;
        height: 175px;
        max-width: 175px;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 8px 18px rgba(11, 28, 63, 0.22));
    }

    .ts-logo-badge {
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #ffffff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 2px;
    }

    .ts-logo-badge img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .ts-card-content {
        max-width: 100%;
        padding: 0;
        text-align: center;
        align-items: center;
        gap: 10px;
    }

    .ts-card-logo {
        display: none;
    }

    .ts-card-text {
        font-size: 12.5px;
        line-height: 1.6;
        text-align: center;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    .ts-card-author {
        font-size: 15px;
    }

    .ts-card-title {
        font-size: 12px;
    }

    .ts-portrait {
        display: none;
    }

    .ts-nav-arrow {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* ============================================ */
/* SECTION 8: Class Visit Scrolling Images      */
/* ============================================ */
.cv-scroll-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

.cv-scroll-container:active {
    cursor: grabbing;
}

.cv-track {
    display: flex;
    gap: 14px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
}

.cv-track img {
    width: 240px;
    height: 135px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.cv-track img:hover {
    transform: scale(1.05);
}

.cv-hero-title {
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.35;
    color: #ffffff;
}

@media (max-width: 768px) {
    .cv-track {
        gap: 10px;
        animation-duration: 18s;
    }

    .cv-reverse {
        animation-duration: 18s;
    }

    .cv-track img {
        width: 155px;
        height: 98px;
        border-radius: 6px;
    }

    .cv-hero-title {
        font-size: 1.45rem;
        line-height: 1.35;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .cv-track {
        gap: 8px;
        animation-duration: 16s;
    }

    .cv-reverse {
        animation-duration: 16s;
    }

    .cv-track img {
        width: 140px;
        height: 88px;
        border-radius: 6px;
    }

    .cv-hero-title {
        font-size: 1.25rem;
        line-height: 1.35;
        padding: 0 5px;
    }
}

/* CLASS VISIT POPUP */
.cv-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.cv-popup img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.cv-popup-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cv-popup-close:hover {
    transform: scale(1.2);
    color: #d84315;
}

/* ============================================ */
/* ============================================ */
/* SECTION 9: Our Environment                   */
/* ============================================ */
.env-section {
    padding: 25px 16px 35px;
    position: relative;
}

.env-header-wrapper {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.env-badge {
    margin-bottom: 14px;
}

.env-title {
    font-size: clamp(2rem, 2.8vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: #0b1c3f !important;
    margin-bottom: 12px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em;
}

.env-title span {
    color: #00A8EC !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #00A8EC !important;
}

.env-subtitle {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.65;
    margin: 0 !important;
}

.env-grid {
    display: flex;
    gap: 20px;
}

.env-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 330px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(11, 28, 63, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease, flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: #0b1c3f;
    flex: 1 1 0%;
    min-width: 0;
}

.env-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 168, 236, 0.22);
    border-color: rgba(0, 168, 236, 0.5);
}

/* Hover-expand accordion: hovered card grows, siblings shrink to compensate,
   row width and wrapping stay unchanged since the flex container is nowrap.
   Driven by JS (env-grid-hovering / env-card-active classes) rather than
   :has() for reliable cascade behavior on this page. */
.env-grid.env-grid-hovering .env-card {
    flex-grow: 0.8;
}

.env-grid.env-grid-hovering .env-card.env-card-active {
    flex-grow: 1.85;
}

.env-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
    filter: brightness(0.95);
}

.env-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.02);
}

.env-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 28, 63, 0.15) 0%, rgba(11, 28, 63, 0.4) 45%, rgba(11, 28, 63, 0.95) 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.env-card:hover .env-card-overlay {
    opacity: 0.9;
}

.env-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0b1c3f;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.env-card-badge i {
    color: #00a8ec;
}

.env-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 18px;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.env-card-text {
    display: flex;
    flex-direction: column;
}

.env-card-tag {
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    display: block;
}

.env-card-name {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* .env-card-action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.4);
}

.env-card:hover .env-card-action {
    transform: scale(1.12) translateX(2px);
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.5);
} */

@media (max-width: 991px) {
    .env-section {
        padding: 30px 20px 25px;
    }

    .env-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .env-card {
        height: 280px;
    }
}

@media (max-width: 576px) {
    .env-section {
        padding: 30px 16px 20px !important;
        box-sizing: border-box;
    }

    .env-header-wrapper {
        margin-bottom: 24px;
        padding: 0 4px;
    }

    .env-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .env-card {
        height: 195px;
        border-radius: 14px;
    }

    .env-card-badge {
        top: 8px;
        left: 8px;
        padding: 2px 8px;
        font-size: 9.5px;
        gap: 4px;
    }

    .env-card-content {
        padding: 12px 10px;
    }

    .env-card-tag {
        font-size: 8.5px;
        margin-bottom: 2px;
    }

    .env-card-name {
        font-size: 12.5px !important;
    }

    .env-card-action {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }
}

/* ============================================ */
/* SECTION 10: Rise Up Together                 */
/* ============================================ */
.rise-up-section {
    padding: 12px 0 24px;
}

.rise-up-card-container {
    position: relative;
    background: radial-gradient(circle at 10% 20%, #f4f8fe 0%, #edf4fd 50%, #f7faff 100%);
    border-radius: 28px;
    padding: 32px 32px 24px;
    box-shadow: 0 20px 50px rgba(11, 28, 63, 0.04);
    overflow: hidden;
}

/* Background dots pattern */
.rise-bg-dots {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    background-image: radial-gradient(#00a8ec 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

.rise-dots-top-right {
    top: 25px;
    right: 40px;
    width: 90px;
    height: 120px;
}

.rise-dots-center {
    top: 45%;
    left: 48%;
    width: 70px;
    height: 70px;
    opacity: 0.5;
}

/* --- Top Row: Text & Hero Visual --- */
.rise-up-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.rise-content {
    flex: 1 1 440px;
    max-width: 480px;
}

.rise-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #e1f0ff;
    color: #0072db;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 114, 219, 0.15);
}

.rise-badge-pill i {
    font-size: 15px;
}

.rise-title {
    font-size: clamp(2.4rem, 3.4vw, 3.2rem) !important;
    font-weight: 900 !important;
    color: #0d1b3e !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em;
}

.rise-title .rise-blue-text {
    color: #00A8EC !important;
    position: relative;
    display: inline-block;
}

.rise-title .rise-blue-text::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,12 Q50,0 100,10 Q50,18 0,12' fill='%2300A8EC' opacity='0.35'/%3E%3C/svg%3E") no-repeat center bottom;
    background-size: 100% 100%;
}

.rise-description {
    font-size: 14.5px !important;
    color: #556987 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.65;
    max-width: 440px;
}

/* Call to Action Button */
.rise-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #0080ff 0%, #005ce6 100%);
    color: #ffffff !important;
    padding: 8px 10px 8px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.35);
    transition: all 0.3s ease;
}

.rise-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 102, 255, 0.45);
    color: #ffffff !important;
}

.rise-btn-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform 0.3s ease;
}

.rise-btn-primary:hover .rise-btn-circle {
    transform: translateX(3px);
}

/* --- Right Column: Modern Bento Stats Showcase --- */
.rise-visual-col {
    flex: 1.15 1 480px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.rise-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 3;
}

.rise-bento-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 280px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, rgba(0, 198, 255, 0.05) 60%, transparent 80%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

/* Bento Cards Base */
.rise-bento-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px rgba(11, 28, 63, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.rise-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.35);
}

/* Watermark in background */
.rise-bento-watermark {
    position: absolute;
    right: 15px;
    bottom: -15px;
    font-size: 95px;
    color: #0066ff;
    opacity: 0.035;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.rise-bento-card:hover .rise-bento-watermark {
    transform: scale(1.1) rotate(-5deg);
    opacity: 0.06;
}

/* Featured Card (Top) */
.rise-bento-featured {
    background: linear-gradient(145deg, #ffffff 0%, #f6faff 100%);
    border: 1px solid rgba(0, 102, 255, 0.18);
    box-shadow: 0 12px 35px rgba(0, 102, 255, 0.06);
}

.rise-bento-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.rise-bento-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.rise-bento-card:hover .rise-bento-icon {
    transform: scale(1.08);
}

.rise-bento-icon.icon-blue {
    background: linear-gradient(135deg, #0080ff 0%, #0052cc 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.28);
}

.rise-bento-icon.icon-cyan {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 198, 255, 0.28);
}

.rise-bento-icon.icon-purple {
    background: linear-gradient(135deg, #7928ca 0%, #4f46e5 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(121, 40, 202, 0.25);
}

/* Pills */
.rise-bento-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.pill-blue {
    background: rgba(0, 102, 255, 0.08);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.18);
}

.pill-cyan {
    background: rgba(0, 198, 255, 0.1);
    color: #0084b4;
    border: 1px solid rgba(0, 198, 255, 0.2);
}

.pill-purple {
    background: rgba(121, 40, 202, 0.08);
    color: #7928ca;
    border: 1px solid rgba(121, 40, 202, 0.18);
}

/* Card Content */
.rise-bento-content {
    position: relative;
    z-index: 2;
}

.rise-bento-num-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.rise-bento-num {
    font-size: 2.1rem;
    font-weight: 900;
    color: #0b1c3f;
    line-height: 1;
    letter-spacing: -0.03em;
}

.rise-bento-unit {
    font-size: 13px;
    font-weight: 700;
    color: #0066ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rise-bento-title {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0b1c3f !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3;
}

.rise-bento-desc {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.45;
    margin: 0 !important;
}

/* Subgrid for Bottom 2 Cards */
.rise-bento-subgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.rise-bento-half {
    padding: 13px 14px;
}

.rise-bento-half .rise-bento-num {
    font-size: 1.85rem;
}

.rise-bento-half .rise-bento-title {
    font-size: 13.5px !important;
}

.rise-bento-half .rise-bento-desc {
    font-size: 11px !important;
}

/* --- Bottom Row: Team Strip Banner --- */
.rise-team-bottom-banner {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 8px 25px rgba(11, 28, 63, 0.03);
    position: relative;
    z-index: 3;
}

.rise-team-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 250px;
}

.rise-team-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef5ff;
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}

.rise-team-info-text h4 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0b1c3f !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3;
}

.rise-team-info-text p {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.3;
}

.rise-team-avatar-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 6px 0;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.rise-team-avatar-strip:active {
    cursor: grabbing;
}

.rise-team-track-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
}

.rise-team-avatar-item {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

.rise-team-avatar-item img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #ffffff;
    box-shadow: 0 4px 12px rgba(11, 28, 63, 0.12);
    display: block;
    transition: transform 0.3s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.rise-team-avatar-item:hover img {
    transform: scale(1.15);
}

.rise-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #0080ff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 2;
}

/* ============================================ */
/* Responsive Styles for Rise Up Section        */
/* ============================================ */
@media (max-width: 1100px) {
    .rise-team-bottom-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rise-team-info {
        flex: none;
        width: 100%;
    }

    .rise-team-avatar-strip {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .rise-up-card-container {
        padding: 32px 24px;
        border-radius: 28px;
    }

    .rise-up-top-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .rise-content {
        flex: none;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rise-description {
        max-width: 540px;
        margin: 0 0 20px 0 !important;
    }

    .rise-visual-col {
        flex: none;
        width: 100%;
    }

    .rise-stats-wrapper {
        width: 100%;
        max-width: 500px;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .rise-up-top-row {
        gap: 16px;
        margin-bottom: 16px;
    }

    .rise-bento-card {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .rise-bento-num {
        font-size: 1.5rem;
    }

    .rise-bento-subgrid {
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .rise-up-section {
        padding: 10px 0 20px;
    }

    .rise-up-card-container {
        padding: 16px 12px;
        border-radius: 18px;
    }

    .rise-badge-pill {
        margin-bottom: 10px;
        padding: 5px 12px;
        font-size: 11.5px;
    }

    .rise-title {
        font-size: 1.65rem !important;
        margin: 0 0 8px 0 !important;
    }

    .rise-description {
        font-size: 12.5px !important;
        margin: 0 0 14px 0 !important;
        line-height: 1.5;
    }

    .rise-up-top-row {
        gap: 12px;
        margin-bottom: 12px;
    }

    .rise-stats-wrapper {
        gap: 8px;
    }

    .rise-bento-watermark {
        display: none;
    }

    .rise-bento-subgrid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .rise-bento-card {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .rise-bento-card-top {
        margin-bottom: 6px;
    }

    .rise-bento-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
        border-radius: 9px;
    }

    .rise-bento-pill {
        padding: 3px 8px;
        font-size: 10px;
        letter-spacing: 0;
    }

    .rise-bento-num-wrap {
        gap: 6px;
        margin-bottom: 2px;
    }

    .rise-bento-num {
        font-size: 1.35rem;
    }

    .rise-bento-unit {
        font-size: 10.5px;
    }

    .rise-bento-title {
        font-size: 12.5px !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.25;
    }

    .rise-bento-desc {
        font-size: 10.5px !important;
        line-height: 1.35;
    }

    .rise-bento-half {
        padding: 10px 10px;
    }

    .rise-bento-half .rise-bento-card-top {
        margin-bottom: 4px;
    }

    .rise-bento-half .rise-bento-num {
        font-size: 1.25rem;
    }

    .rise-bento-half .rise-bento-title {
        font-size: 11.5px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rise-bento-half .rise-bento-desc {
        font-size: 10px !important;
        line-height: 1.3;
    }

    .rise-team-bottom-banner {
        padding: 10px 12px;
        border-radius: 14px;
        gap: 8px;
    }

    .rise-team-avatar-item {
        width: 34px;
        height: 34px;
    }

    .rise-team-avatar-item img {
        width: 34px;
        height: 34px;
    }
}

/* ============================================ */
/* SECTION 11: Smart POS Device                 */
/* ============================================ */
.smart-pos-section {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fe 50%, #ffffff 100%);
    overflow: hidden;
}

.smart-pos-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.smart-pos-bg-glow.glow-1 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.14) 0%, transparent 70%);
    top: 50px;
    left: -100px;
}

.smart-pos-bg-glow.glow-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.08) 0%, transparent 70%);
    bottom: 50px;
    right: -80px;
}

.smart-pos-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px;
    position: relative;
    z-index: 2;
    padding-bottom: 24px;
}

.smart-pos-left {
    flex: 1 1 420px;
    max-width: 500px;
}

.smart-pos-badge {
    margin-bottom: 18px;
}

.smart-pos-title {
    font-size: clamp(2rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0b1c3f !important;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.smart-pos-title span {
    color: #00A8EC !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #00A8EC !important;
}

.smart-pos-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #00a8ec;
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(11, 28, 63, 0.05);
}

.stat-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 168, 236, 0.15), rgba(0, 82, 204, 0.15));
    color: #0079ab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}

.stat-content-wrap {
    display: flex;
    flex-direction: column;
}

.stat-content-wrap strong {
    font-size: 14.5px;
    color: #0b1c3f;
    line-height: 1.25;
}

.stat-content-wrap span {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.smart-pos-desc {
    font-size: 1.02rem !important;
    color: #475569 !important;
    line-height: 1.75;
    margin-bottom: 25px;
}

.smart-pos-device-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.smart-pos-device-wrap::before {
    content: "";
    position: absolute;
    inset: 15% 10% 5% 10%;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.15) 0%, rgba(234, 242, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.pos-device-slider {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0 0 10px;
    user-select: none;
    touch-action: pan-y;
    z-index: 1;
}

.pos-slides-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    padding: 10px 0 6px;
}

.pos-slides-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    width: 100%;
}

.pos-slide-item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.pos-slide-item:active {
    cursor: grabbing;
}

.pos-slide-item img {
    width: 100%;
    max-width: 390px;
    height: 310px;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(11, 28, 63, 0.16));
    transition: transform 0.35s ease;
    pointer-events: none;
}

.pos-slide-item:hover img {
    transform: scale(1.03);
}

.pos-slider-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.pos-slider-title {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: #00A8EC;
    background: rgba(0, 168, 236, 0.08);
    border: 1px solid rgba(0, 168, 236, 0.25);
    border-radius: 999px;
    padding: 4px 16px;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(0, 168, 236, 0.06);
    transition: all 0.3s ease;
}

/* Prev / Next Nav Buttons */
.pos-slider-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(11, 28, 63, 0.12);
    color: #0b1c3f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
}

.pos-slider-nav:hover {
    background: #00A8EC;
    color: #ffffff;
    border-color: #00A8EC;
    box-shadow: 0 6px 18px rgba(0, 168, 236, 0.35);
    transform: translateY(-50%) scale(1.08);
}

.pos-slider-prev {
    left: -12px;
}

.pos-slider-next {
    right: -12px;
}

/* Dots */
.pos-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.pos-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pos-dot.active {
    width: 24px;
    background: #00A8EC;
    box-shadow: 0 2px 8px rgba(0, 168, 236, 0.4);
}

.smart-pos-right {
    flex: 1.3 1 500px;
}

.smart-pos-video-wrap {
    position: relative;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(11, 28, 63, 0.12) !important;
    border: 1px solid #e2e8f0;
}

.smart-pos-video-wrap .youtube-facade {
    width: 100%;
    height: 360px;
    cursor: pointer;
    position: relative;
    background: #000;
    overflow: hidden;
}

.smart-pos-video-wrap .youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.smart-pos-video-wrap .youtube-facade:hover img {
    transform: scale(1.03);
}

.custom-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smart-pos-video-wrap .youtube-facade:hover .custom-video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-btn-circle-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Multi-layer Concentric Glowing Radar Rings */
.play-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 210, 255, 0.85);
    background: radial-gradient(circle, rgba(0, 210, 255, 0.3) 0%, rgba(0, 168, 236, 0.12) 50%, transparent 75%);
    animation: radarRipple 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
    pointer-events: none;
}

.play-pulse-ring.r1 {
    animation-delay: 0s;
}

.play-pulse-ring.r2 {
    animation-delay: 0.8s;
}

.play-pulse-ring.r3 {
    animation-delay: 1.6s;
}

@keyframes radarRipple {
    0% {
        transform: scale(0.85);
        opacity: 0.95;
        border-color: rgba(0, 229, 255, 0.9);
    }

    50% {
        opacity: 0.55;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
        border-color: rgba(0, 168, 236, 0);
    }
}

/* Play Button Inner Core with Heartbeat Pulse */
.play-icon-inner {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00e5ff 0%, #0099ff 45%, #004ecc 100%);
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.8), 0 8px 25px rgba(0, 60, 180, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    padding-left: 4px;
    animation: playHeartbeat 2.4s ease-in-out infinite;
    transition: all 0.3s ease;
    border: 2.5px solid rgba(255, 255, 255, 0.9);
    z-index: 2;
    overflow: hidden;
}

/* Shimmer shine passing through play button */
.play-icon-inner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg,
            transparent 35%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 65%);
    transform: rotate(25deg);
    animation: playShimmer 3.2s ease-in-out infinite;
}

@keyframes playShimmer {

    0%,
    25% {
        transform: translateX(-100%) rotate(25deg);
    }

    65%,
    100% {
        transform: translateX(100%) rotate(25deg);
    }
}

@keyframes playHeartbeat {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 24px rgba(0, 210, 255, 0.75), 0 8px 25px rgba(0, 60, 180, 0.55);
    }

    14% {
        transform: scale(1.08);
        box-shadow: 0 0 35px rgba(0, 229, 255, 0.95), 0 10px 30px rgba(0, 80, 220, 0.7);
    }

    28% {
        transform: scale(1);
        box-shadow: 0 0 24px rgba(0, 210, 255, 0.75), 0 8px 25px rgba(0, 60, 180, 0.55);
    }

    42% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.85), 0 10px 28px rgba(0, 80, 220, 0.65);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 24px rgba(0, 210, 255, 0.75), 0 8px 25px rgba(0, 60, 180, 0.55);
    }
}

.smart-pos-video-wrap .youtube-facade:hover .play-icon-inner {
    transform: scale(1.06);
    box-shadow: 0 0 42px rgba(0, 229, 255, 1), 0 10px 35px rgba(0, 80, 220, 0.85);
}

/* Floating Call-to-Action Tag below Button */
.play-btn-cta-badge {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(3, 15, 38, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 210, 255, 0.5);
    color: #ffffff;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 210, 255, 0.3);
    animation: ctaBadgeFloat 2.4s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes ctaBadgeFloat {

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

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

.cta-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;
    animation: ctaDotBlink 1.4s ease-in-out infinite;
    display: inline-block;
}

@keyframes ctaDotBlink {

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

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

.smart-pos-benefits {
    margin-top: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 10px 30px rgba(11, 28, 63, 0.05);
}

.smart-pos-benefits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 10px;
}

.benefits-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefits-header-left i {
    color: #00a8ec;
    font-size: 18px;
}

.smart-pos-benefits-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0b1c3f !important;
    margin: 0 !important;
    padding: 0 !important;
}

.smart-pos-benefits-title::before {
    display: none !important;
}

.benefits-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(0, 168, 236, 0.08);
    border: 1px solid rgba(0, 168, 236, 0.2);
    color: #0079ab;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.smart-pos-benefits-scroll-wrap {
    height: 200px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.smart-pos-scroll-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
    animation: smartPosScrollUp 4s linear infinite;
}

@keyframes smartPosScrollUp {
    0% {
        transform: translateY(0);
    }

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

.smart-pos-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.smart-pos-benefit:hover {
    background: #f0f7ff;
    transform: translateX(2px);
}

.smart-pos-icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 168, 236, 0.12), rgba(0, 82, 204, 0.1));
    color: #0079ab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.smart-pos-benefit:hover .smart-pos-icon {
    transform: scale(1.1);
    color: #00a8ec;
}

.smart-pos-benefit-text {
    line-height: 1.3;
}

/* Bottom 4 Feature Cards */
.smart-pos-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
    z-index: 2;
    margin-top: 16px;
}

.smart-pos-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px 20px 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(11, 28, 63, 0.05);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.smart-pos-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 168, 236, 0.14);
    border-color: rgba(0, 168, 236, 0.4);
}

.smart-pos-card.is-active-slide {
    border-color: #00A8EC !important;
    background: #f8fcff !important;
    box-shadow: 0 14px 32px rgba(0, 168, 236, 0.18) !important;
    transform: translateY(-4px);
}

.smart-pos-card-img-wrap {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    cursor: pointer;
}

.smart-pos-card img {
    max-width: 150px;
    max-height: 140px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 6px 14px rgba(11, 28, 63, 0.1));
    cursor: pointer;
}

.smart-pos-card:hover img {
    transform: scale(1.06);
}

.smart-pos-card-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0b1c3f !important;
    margin-bottom: 6px !important;
    line-height: 1.3;
}

.smart-pos-card-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45;
    margin: 0 !important;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {

    .smart-pos-container {
        gap: 36px;
    }

    .smart-pos-left {
        max-width: 100%;
        text-align: center;
    }

    .smart-pos-badge {
        margin-left: auto;
        margin-right: auto;
        display: inline-flex;
    }

    .smart-pos-title {
        text-align: center;
    }

    .smart-pos-stat-card {
        text-align: left;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .smart-pos-desc {
        text-align: center;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
    }

    .smart-pos-right {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .smart-pos-video-wrap {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 16px !important;
    }

    .smart-pos-video-wrap .youtube-facade {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .smart-pos-benefits-scroll-wrap {
        height: 230px;
    }

    .smart-pos-scroll-track {
        grid-template-columns: repeat(2, 1fr);
        animation-duration: 9s;
    }

    .smart-pos-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 36px;
    }
}

@media (max-width: 576px) {
    .smart-pos-video-wrap .youtube-facade {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }

    .play-btn-circle-wrap {
        width: 58px;
        height: 58px;
    }

    .play-icon-inner {
        width: 52px;
        height: 52px;
        font-size: 17px;
    }

    .play-btn-cta-badge {
        font-size: 11px;
        padding: 4px 12px;
        margin-top: 8px;
    }

    .smart-pos-benefits {
        margin-top: 14px;
        padding: 14px 12px;
        border-radius: 14px;
    }

    .smart-pos-benefits-header {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .smart-pos-benefits-scroll-wrap {
        height: 140px;
    }

    .smart-pos-scroll-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 10px;
        animation-duration: 9s;
    }

    .smart-pos-benefit {
        padding: 5px 6px;
        font-size: 12px;
        gap: 8px;
    }

    .smart-pos-icon {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .smart-pos-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 25px;
    }

    .smart-pos-card {
        padding: 14px 10px 12px;
        border-radius: 14px;
    }

    .smart-pos-card-img-wrap {
        height: 85px;
        margin-bottom: 8px;
    }

    .smart-pos-card img {
        max-width: 85px;
        max-height: 80px;
    }

    .smart-pos-card-title {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }

    .smart-pos-card-desc {
        font-size: 11px !important;
        line-height: 1.35;
    }
}

/* ============================================ */
/* SECTION 12: CFMS Hero Section                */
/* ============================================ */
.cfms-hero {
    position: relative;
    padding: 40px 0;
}

.cfms-hero-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 28px;
    padding: 44px 48px;
    box-shadow: 0 20px 50px rgba(11, 28, 63, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 20px;
}

.cfms-hero-content {
    flex: 1 1 480px;
    max-width: 520px;
}

.cfms-hero-title {
    font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0d1b3e !important;
    text-shadow: none !important;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.cfms-hero-title span {
    color: #00a8ec !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #00a8ec !important;
}

.cfms-hero-desc {
    font-size: 1rem !important;
    color: #556987 !important;
    text-shadow: none !important;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 26px;
}

.cfms-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cfms-hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 26px 10px 10px;
    border: none !important;
    border-radius: 50px;
    font-size: 15.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 102, 255, 0.3) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
}

.cfms-hero-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.cfms-hero-btn:hover::before {
    left: 120%;
}

.cfms-hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 102, 255, 0.4) !important;
    color: #ffffff !important;
}

.cfms-hero-btn-icon {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #ffffff !important;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.cfms-hero-btn>span {
    position: relative;
    z-index: 2;
}

.cfms-hero-btn:hover .cfms-hero-btn-icon {
    transform: scale(1.1);
}

.cfms-hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12.5px 26px;
    background: #ffffff !important;
    color: #0d1b3e !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(11, 28, 63, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.cfms-hero-btn-ghost:hover {
    transform: translateY(-3px);
    border-color: #00a8ec !important;
    color: #00a8ec !important;
    box-shadow: 0 8px 20px rgba(0, 168, 236, 0.15);
}

/* Hero Photo */
.cfms-hero-photo-wrap {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    justify-content: center;
}

.cfms-hero-photo {
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 14px 24px rgba(11, 28, 63, 0.12));
}

/* ============================================ */
/* 3-Column Bento Stat Grid                      */
/* ============================================ */
.cfms-hero-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cfms-hero-bento-item {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(11, 28, 63, 0.04);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cfms-hero-bento-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 102, 255, 0.12);
    border-color: rgba(0, 102, 255, 0.35);
}

.cfms-bento-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: none;
}

.cfms-bento-icon.icon-blue {
    background: linear-gradient(135deg, #00a8ec, #0052cc);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.3);
}

.cfms-bento-icon.icon-emerald {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

.cfms-bento-icon.icon-cyan {
    background: linear-gradient(135deg, #06b6d4, #0284c7);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.3);
}

.cfms-bento-text h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0d1b3e !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3;
}

.cfms-bento-text p {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .cfms-hero {
        padding: 22px 0 26px;
    }

    .cfms-hero-card {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
        gap: 22px;
    }

    .cfms-hero-content {
        flex: none;
        max-width: 100%;
    }

    .cfms-hero-actions {
        justify-content: center;
    }

    .cfms-hero-photo-wrap {
        order: -1;
        flex: 0 0 auto;
        max-width: 240px;
    }

    .cfms-hero-photo {
        max-width: 240px;
        max-height: 260px;
    }
}

@media (max-width: 768px) {
    .cfms-hero-title {
        font-size: 1.6rem !important;
    }

    .cfms-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .cfms-hero-btn,
    .cfms-hero-btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .cfms-hero-card {
        padding: 24px 16px;
        border-radius: 20px;
        margin-bottom: 14px;
    }

    .cfms-hero-title {
        font-size: 1.4rem !important;
    }

    .cfms-hero-desc {
        font-size: 13px !important;
    }

    .cfms-hero-bento-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cfms-hero-bento-item {
        padding: 16px;
    }
}

/* ============================================ */
/* SECTION 13: Video Marketing Accordion          */
/* ============================================ */
.qv-badge {
    background: rgba(0, 168, 236, 0.1) !important;
    border-color: rgba(0, 168, 236, 0.28) !important;
    color: #0079ab !important;
}

.qv-accordion .accordion-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    box-shadow: 0 6px 18px rgba(11, 28, 63, .06);
    margin-bottom: 14px;
    overflow: visible;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.qv-accordion .accordion-item:hover {
    transform: translateY(-2px);
    border-color: #dbe8f6;
    box-shadow: 0 12px 26px rgba(11, 28, 63, .1);
}

.qv-accordion .accordion-item.active {
    box-shadow: 0 14px 30px rgba(11, 28, 63, .12);
}

.qv-accordion .accordion-header {
    background: none;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: none;
    border-left: 4px solid var(--qv-accent, #00a8ec);
    border-radius: 14px;
    width: 100%;
    display: flex;
    cursor: pointer;
}

.qv-accordion .accordion-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    text-align: left;
    cursor: pointer;
}

.qv-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--qv-accent, #00a8ec) 12%, #ffffff);
    color: var(--qv-accent, #00a8ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.qv-accordion .accordion-item.active .qv-icon {
    transform: scale(1.08) rotate(-6deg);
}

.qv-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    font-weight: 400;
}

.qv-text strong {
    font-weight: 700;
    color: #0b1c3f;
}

.qv-accordion .toggle {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--qv-accent, #00a8ec);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* "+" turns into "x" when the panel is open */
.qv-accordion .accordion-item.active .toggle {
    transform: rotate(135deg);
}

.qv-accordion .accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 18px;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.qv-accordion .accordion-content p {
    margin: 0;
    padding-left: 56px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.qv-accordion .accordion-item.active .accordion-content {
    opacity: 1;
    padding: 0 18px 16px;
}

.qv-accordion .accordion-item:nth-child(1) {
    --qv-accent: #00a8ec;
}

.qv-accordion .accordion-item:nth-child(2) {
    --qv-accent: #0052cc;
}

.qv-accordion .accordion-item:nth-child(3) {
    --qv-accent: #f5a623;
}

.qv-accordion .accordion-item:nth-child(4) {
    --qv-accent: #34a853;
}

/* Video UI Layout & Video Player Styles */
.video-ui {
    padding: 10px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.video-ui .website-heading-wrapper {
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .video-ui {
        padding: 24px 16px;
    }
}

.video-ui-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 3.9fr 8.1fr;
    gap: 32px;
    align-items: center;
}

@media (max-width: 768px) {
    .video-ui-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.video-decor-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-decor-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(0, 168, 236, 0.18);
    border-radius: 24px;
    background: linear-gradient(150deg, #f7fbff 0%, #eef6fd 100%);
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.06);
    pointer-events: none;
}

.video-content-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
}

.video-content-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(0, 82, 204, 0.12);
}

.video-play-bg {
    position: absolute;
    z-index: 0;
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: rgba(0, 168, 236, 0.05);
    pointer-events: none;
}

@media (max-width: 768px) {
    .video-decor-wrapper {
        padding: 8px;
        margin: 0 auto;
        width: 100%;
    }

    .video-decor-wrapper::before {
        border-radius: 20px;
    }

    .video-content-box {
        border-radius: 14px;
    }

    .video-content-box video {
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0, 82, 204, 0.1);
    }
}

/* ============================================ */
/* SECTION 14: Trusted Partners & Map             */
/* ============================================ */
#trustedPartnersSection {
    scroll-margin-top: 80px;
}

.tp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #eaf2ff;
    border: 1px solid #c9defb;
    color: var(--brand-300, #2f7de0);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 22px;
}

.tp-heading {
    font-size: 2.6rem !important;
    letter-spacing: -0.01em;
}

.tp-subtext {
    text-align: center;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 18px;
}

.tp-underline {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-300, #2f7de0), var(--brand-200, #6aa6f2));
    margin: 0 auto 30px;
}

@media (max-width: 768px) {
    .tp-heading {
        font-size: 1.9rem !important;
    }
}

.clients-scroll-wrap {
    height: 520px;
    max-height: 520px;
    overflow: hidden;
    position: relative;
    padding: 10px 10px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

.partners-multi-col-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    width: 100%;
    overflow: visible;
}

.partners-vertical-col {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    position: relative;
    height: 100%;
    z-index: 1;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x;
}

.partners-vertical-col:active {
    cursor: grabbing;
}

.partners-vertical-col:hover {
    z-index: 30;
}

.partners-col-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    will-change: transform;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
}

.viloshan {
    background: #ffffff;
    border: 1.5px solid #ececec;
    border-radius: 14px;
    padding: 8px 6px;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(11, 28, 63, 0.04);
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.viloshan:hover,
.viloshan:focus,
.viloshan:active {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 168, 236, 0.25);
    border-color: #00a8ec;
    z-index: 50;
    outline: none !important;
}

.viloshan img {
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    pointer-events: none;
}

/* White logos on light cards: convert white to crisp black */
img[src*="Sesip.webp"],
.viloshan img[src*="Sesip.webp"],
.viloshan.is-white-logo img,
.is-white-logo img,
.logo-invert-dark {
    filter: brightness(0);
}

@media (max-width: 1200px) {
    .partners-multi-col-grid {
        gap: 8px;
    }

    .partners-vertical-col.col-idx-6 {
        display: none;
        /* Show 5 columns */
    }
}

@media (max-width: 991px) {
    .clients-scroll-wrap {
        height: 440px;
        max-height: 440px;
    }

    .partners-vertical-col.col-idx-5,
    .partners-vertical-col.col-idx-6 {
        display: none;
        /* Show 4 columns */
    }
}

@media (max-width: 575px) {
    .clients-scroll-wrap {
        height: 400px;
        max-height: 400px;
        padding: 8px 4px;
        touch-action: pan-x;
    }

    .partners-multi-col-grid {
        gap: 6px;
    }

    /* Show 4 full vertical columns on mobile (col 1, 2, 3, 4) */
    .partners-vertical-col.col-idx-5,
    .partners-vertical-col.col-idx-6 {
        display: none !important;
    }

    .partners-col-track {
        gap: 8px;
    }

    .viloshan {
        height: 58px !important;
        padding: 5px 4px;
        border-radius: 11px;
    }

    .viloshan img {
        max-height: 38px;
    }
}

/* Map specific */
#map-wrap {
    width: 425px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
}

#map-wrap {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

#map-container {
    position: relative;
    width: 100%;
    aspect-ratio: 450 / 793;
    display: flex;
    justify-content: center;
    align-items: center;
}

#svg-host {
    width: 100%;
    height: 100%;
    position: relative;
}

#svg-host svg {
    width: 100%;
    height: 100%;
    display: block;
}

.map-hint {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
}

.map-hint i {
    color: #00a8ec;
    margin-right: 6px;
}

@media (max-width: 768px) {
    #map-wrap {
        width: 100%;
        max-width: 358px;
    }
}

#map-wrap path {
    stroke-width: 0.4px;
    transition: all .25s ease;
}

#map-wrap path.hovered {
    fill: #00a8ec;
    filter: drop-shadow(0 0 10px rgba(0, 168, 236, .85));
}

/* ============================================ */
/* SECTION 15: Pricing & Connect                  */
/* ============================================ */
.tp-pricing-card {
    max-width: 1200px;
    margin: 20px auto 0;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 35px rgba(11, 28, 63, .08);
}

#manageForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
    margin: 0;
}

.tp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tp-row>.option {
    flex: 1 1 220px;
}

.tp-option {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 14px;
    padding: 14px 16px 14px 40px;
    box-shadow: 0 4px 14px rgba(11, 28, 63, .05);
}

.tp-option:hover {
    background: #fff;
    border-color: var(--brand-200, #6aa6f2);
}

.tp-option input[type="checkbox"] {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.tp-option-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand-100, #eaf2ff);
    color: var(--brand-300, #2f7de0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.tp-option-text {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.tp-option .price {
    font-weight: 700;
    color: #0b1c3f;
    white-space: nowrap;
}

.tp-option-rfid {
    flex-wrap: wrap;
    padding: 16px 16px 16px 40px;
}

.tp-rfid-tiers {
    flex-basis: 100%;
    margin-left: 48px;
    color: #666;
    font-size: 13px;
}

.tp-rfid-tiers .bar {
    margin: 0 8px;
    color: #ccc;
}

.tp-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.tp-step-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #dbe4f3;
    background: var(--brand-100, #eaf2ff);
    color: var(--brand-300, #2f7de0);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.tp-step-input {
    width: 56px;
    text-align: center;
    border: 1px solid #dbe4f3;
    border-radius: 8px;
    padding: 5px 4px;
    font-weight: 600;
    appearance: textfield;
    -moz-appearance: textfield;
}

.tp-step-input::-webkit-outer-spin-button,
.tp-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tp-rfid-price {
    font-weight: 700 !important;
    color: #0b1c3f;
    margin-left: 4px !important;
}

.tp-cta {
    text-align: center;
    margin-top: 26px;
}

.tp-total-btn {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .35);
}

@media (max-width: 600px) {
    .tp-rfid-tiers {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .tp-rfid-tiers {
        margin-left: 0;
    }
}

/* ============================================ */
/* SECTION 16: Video Contact & Stats Bar         */
/* ============================================ */
.tp-stats-bar {
    background: transparent;
    border: none;
    padding: 6px 16px 8px;
    box-sizing: border-box;
    position: relative;
    /* Full-bleed without the 100vw scrollbar overflow */
    /* margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw); */
    width: auto;
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

.tp-stats-inner {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tp-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 168, 236, 0.16);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 82, 204, 0.05);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-stat-item:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: #00a8ec;
    box-shadow: 0 12px 28px rgba(0, 168, 236, 0.18);
}

.tp-stat-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.28);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tp-stat-item:hover .tp-stat-icon {
    transform: scale(1.08) rotate(-5deg);
}

.tp-stat-text {
    min-width: 0;
}

.tp-stat-text strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #0b1c3f;
    margin-bottom: 2px;
}

.tp-stat-text span {
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

@media (max-width: 991px) {
    .tp-stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .tp-stats-bar {
        padding: 14px 10px 6px;
    }

    .tp-stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .tp-stat-item {
        padding: 10px 10px;
        border-radius: 14px;
        gap: 9px;
    }

    .tp-stat-icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
        border-radius: 10px;
        font-size: 14px;
    }

    .tp-stat-text strong {
        font-size: 12px;
        line-height: 1.2;
    }

    .tp-stat-text span {
        font-size: 10px;
        line-height: 1.2;
    }
}

/* ============================================ */
/* SECTION 14b: Let's Connect banner            */
/* ============================================ */
.connect-section {
    position: relative;
    width: 100%;
    min-height: 440px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url('img/group_image4.webp?v=20260901_hd_v2');
    background-size: cover;
    background-position: center;
    padding: 70px max(6%, 22px);
    margin: 30px auto;
}

/* Directional scrim: dark where the copy sits, clear over the team */
.connect-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(95deg, rgba(3, 14, 33, 0.93) 0%, rgba(3, 14, 33, 0.84) 32%, rgba(3, 14, 33, 0.46) 62%, rgba(3, 14, 33, 0.25) 100%),
        linear-gradient(180deg, rgba(3, 14, 33, 0.3) 0%, rgba(3, 14, 33, 0) 35%, rgba(3, 14, 33, 0.35) 100%);
}

.connect-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    color: #fff;
}

.connect-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 20px;
    backdrop-filter: blur(6px);
}

.connect-eyebrow i {
    color: #00d2ff;
}

.connect-title {
    font-size: clamp(32px, 4.4vw, 54px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1.1;
    margin: 0 0 16px;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.45);
}

.connect-title span {
    color: #00d2ff;
}

.connect-desc {
    font-size: clamp(15px, 1.3vw, 18.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px;
    max-width: 850px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.connect-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.connect-btn,
.connect-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.connect-btn {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0, 82, 204, 0.45);
}

.connect-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 168, 236, 0.55);
    color: #ffffff !important;
}

.connect-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
}

.connect-btn-ghost:hover {
    background: #ffffff;
    color: #0052cc !important;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(3, 14, 33, 0.35);
}

.connect-btn .fa-arrow-right,
.connect-btn-ghost .fa-arrow-right {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.connect-btn:hover .fa-arrow-right,
.connect-btn-ghost:hover .fa-arrow-right {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .connect-section {
        min-height: 400px;
        padding: 60px 24px;
    }

    /* Photo has no clear side on narrow screens — darken the whole frame */
    .connect-scrim {
        background: linear-gradient(180deg, rgba(3, 14, 33, 0.86) 0%, rgba(3, 14, 33, 0.76) 50%, rgba(3, 14, 33, 0.88) 100%);
    }
}

@media (max-width: 575px) {
    .connect-section {
        min-height: 360px;
        padding: 48px 18px;
    }

    .connect-actions .connect-btn,
    .connect-actions .connect-btn-ghost {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================ */
/* SECTION 16b: Video + Order Form              */
/* ============================================ */
.order-section {
    position: relative;
    overflow: hidden;
    padding: 70px 20px;
    color: #fff;
    background: linear-gradient(155deg, #051327 0%, #0a2a52 38%, #0f4c75 70%, #1d7fb8 100%);
    scroll-margin-top: 70px;
}

.order-section::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.28) 0%, rgba(0, 168, 236, 0) 70%);
    pointer-events: none;
}

.order-grid {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.order-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 236, 0.1);
    border: 1px solid rgba(0, 168, 236, 0.3);
    color: #0079ab;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.order-eyebrow-light {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.order-eyebrow-light i {
    color: #6ddcff;
}

.order-video-title {
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #ffffff;
    margin: 0 0 24px;
    max-width: 460px;
}

.uttpala {
    background: #fff;
    padding: 12px;
    border-radius: 18px;
    max-width: 520px;
    box-shadow: 0 20px 44px rgba(2, 12, 30, 0.4);
}

.youtube-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.youtube-facade:hover img {
    transform: scale(1.04);
}

.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(255, 0, 0, 0.85);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.youtube-facade:hover .yt-play-btn {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}

/* ---- Order card ---- */
.order-card {
    background: #ffffff;
    color: #0f172a;
    padding: 32px;
    border-radius: 22px;
    box-shadow: 0 24px 56px rgba(2, 12, 30, 0.32);
}

.order-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 8px;
    color: #0f172a;
}

.order-title span {
    color: #00a8ec;
}

.order-sub {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 22px;
}

.order-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.order-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.order-field>i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.25s ease;
}

.order-field input {
    width: 100%;
    padding: 13px 14px 13px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14.5px;
    color: #0f172a;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.order-field input::placeholder {
    color: #94a3b8;
}

.order-field input:focus {
    outline: none;
    border-color: #00a8ec;
    box-shadow: 0 0 0 3px rgba(0, 168, 236, 0.16);
}

.order-field input:focus+i,
.order-field input:focus~i {
    color: #00a8ec;
}

.order-field.is-readonly input {
    background: #f6f9fc;
    color: #0052cc;
    font-weight: 700;
}

.order-field.has-error input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.pricelist {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin: 16px 0 10px;
}

.pricelist i {
    color: #00a8ec;
    font-size: 12px;
    animation: pricelistNudge 1.8s ease-in-out infinite;
}

@keyframes pricelistNudge {

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

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

#bottomCheckboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.selected-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 236, 0.1);
    border: 1px solid rgba(0, 168, 236, 0.3);
    color: #0079ab;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
}

.selected-pill button {
    border: none;
    background: rgba(0, 82, 204, 0.12);
    color: #0052cc;
    width: 18px;
    height: 18px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
}

.selected-pill button:hover {
    background: #ef4444;
    color: #fff;
}

.order-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(0, 168, 236, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.order-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(0, 168, 236, 0.48);
}

.order-submit .fa-whatsapp {
    font-size: 1.25rem;
}

.order-note {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
    min-height: 18px;
}

.order-note.is-error {
    color: #dc2626;
    font-weight: 600;
}

.order-note.is-ok {
    color: #16a34a;
    font-weight: 600;
}

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

    .uttpala {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .order-section {
        padding: 50px 16px;
    }

    .order-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .order-row {
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricelist i {
        animation: none;
    }
}

/* ============================================ */
/* SECTION 17: Major Clients (Full Bleed)        */
/* ============================================ */
.clients-fluid-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: transparent;
    padding: 20px 0 16px !important;
    border: none;
}

.clients-inner-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.clients-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 236, 0.08);
    border: 1px solid rgba(0, 168, 236, 0.25);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0077b6;
    margin-bottom: 8px;
}

.clients-tag i {
    font-size: 11px;
    color: #00a8ec;
}

.clients-header-wrapper .website-heading-wrapper {
    margin-bottom: 0;
    text-align: center;
}

.clients-accent-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
}

.clients-accent-glow {
    height: 3px;
    width: 55px;
    border-radius: 3px;
    background: linear-gradient(90deg, #00a8ec, rgba(0, 168, 236, 0.2));
}

.clients-accent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a8ec;
    box-shadow: 0 0 8px rgba(0, 168, 236, 0.8);
}

/* Logo Sliding Marquee Track with Drag Support */
.clients-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.clients-slider-wrapper.is-dragging {
    cursor: grabbing !important;
}

.clients-slider-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    will-change: transform;
}

.client-logo {
    flex: 0 0 auto;
    width: 156px;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 168, 236, 0.16);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.05);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.client-logo img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.client-logo:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: #00a8ec;
    box-shadow: 0 14px 30px rgba(0, 168, 236, 0.18);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

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

/* ---- 14 years / anniversary (Full Bleed Container-Fluid) ---- */
.anniversary-fluid-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 24px 0 41px !important;
    /* background: radial-gradient(circle at 82% 50%, rgba(0, 168, 236, 0.12) 0%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f7faff 40%, #edf6ff 70%, #ffffff 100%); */
    border: none;
}

.anniversary-inner-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Halftone Dot Matrix in bottom-left */
.anni-dots-bg {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 220px;
    height: 220px;
    background-image: radial-gradient(rgba(0, 168, 236, 0.28) 2px, transparent 2px);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 0;
}

.anniversary-copy {
    position: relative;
    z-index: 1;
}

.anniversary-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 236, 0.08);
    border: 1px solid rgba(0, 168, 236, 0.28);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0077b6;
    margin-bottom: 18px;
}

.anniversary-tag i {
    font-size: 12px;
    color: #00a8ec;
}

.anniversary-copy .website-heading-wrapper {
    margin-bottom: 0;
}

.anni-main-title {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
    margin: 0;
}

.anni-gradient-text {
    color: #00A8EC !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #00A8EC !important;
}

.anni-accent-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 20px;
}

.anni-accent-glow {
    height: 3px;
    width: 55px;
    border-radius: 3px;
    background: linear-gradient(90deg, #00a8ec, rgba(0, 168, 236, 0.2));
}

.anni-accent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a8ec;
    box-shadow: 0 0 8px rgba(0, 168, 236, 0.8);
}

.anniversary-fluid-section p {
    font-size: 15.5px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 0;
    max-width: 620px;
}

.anniversary-fluid-section p b {
    color: #023b9e;
    font-weight: 700;
}

.anniversary-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* High-Tech Concentric Orbital Rings */
.anni-tech-circuit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}

.anni-ring {
    position: absolute;
    border-radius: 50%;
}

.ring-1 {
    width: 440px;
    height: 440px;
    border: 1.5px dashed rgba(0, 168, 236, 0.35);
    animation: rotateCircuit 45s linear infinite;
}

.ring-2 {
    width: 365px;
    height: 365px;
    border: 1.5px solid rgba(0, 168, 236, 0.38);
}

.ring-3 {
    width: 295px;
    height: 295px;
    border: 1px solid rgba(0, 168, 236, 0.22);
}

.anni-particle {
    position: absolute;
    pointer-events: none;
}

.pt-1 {
    top: 12%;
    right: 16%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d2ff;
    box-shadow: 0 0 8px #00d2ff;
}

.pt-2 {
    bottom: 18%;
    left: 10%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a8ec;
}

.pt-3 {
    top: 24%;
    left: 18%;
    width: 10px;
    height: 10px;
    border: 2px solid #00d2ff;
    border-radius: 50%;
}

.pt-triangle {
    top: 14%;
    right: 8%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid rgba(0, 168, 236, 0.7);
    transform: rotate(25deg);
}

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

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

.anni-badge-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.25) 0%, rgba(0, 82, 204, 0.08) 55%, transparent 75%);
    filter: blur(25px);
    pointer-events: none;
    z-index: 0;
}

.anniversary-badge img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 36px rgba(0, 50, 140, 0.22));
    animation: anniBadgeFloat 4s ease-in-out infinite;
}

@keyframes anniBadgeFloat {

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

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

#storyBtn {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    border: none;
    padding: 8px 10px 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    box-shadow: 0 10px 25px rgba(0, 168, 236, 0.38);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-btn-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #0052cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

#storyBtn:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 32px rgba(0, 168, 236, 0.52);
    transform: translateY(-3px) scale(1.02);
    animation-play-state: paused;
}

#storyBtn:hover .story-btn-circle {
    transform: translateX(4px);
}

@keyframes slowBounce {

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

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

.bouncing {
    animation: slowBounce 2.8s ease-in-out infinite;
}

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

    40% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.08);
    }

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

.bounce-back {
    animation: bounceBack 0.6s ease-out;
}

@media (max-width: 991px) {
    .anniversary-fluid-section {
        padding: 55px 0 75px !important;
    }

    .anniversary-inner-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        text-align: left;
    }

    .anniversary-badge {
        order: -1;
        margin: 0 auto 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .anniversary-copy {
        order: 1;
        width: 100%;
    }

    .anniversary-badge img {
        max-width: 320px;
        margin: 0 auto;
    }

    #storyBtn {
        margin-top: 22px;
    }

    .ring-1 {
        width: 320px;
        height: 320px;
    }

    .ring-2 {
        width: 260px;
        height: 260px;
    }

    .ring-3 {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .padding2 {
        padding: 14px 10px;
    }

    .clients-fluid-section {
        padding: 18px 0 12px;
    }

    .clients-inner-container {
        padding: 0 12px;
    }

    .clients-slider-wrapper {
        padding: 8px 0;
        mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
    }

    .clients-slider-track {
        gap: 8px;
    }

    .client-logo {
        width: clamp(74px, calc((100vw - 48px) / 4), 92px);
        height: clamp(52px, 14vw, 62px);
        padding: 6px 8px;
        border-radius: 12px;
        border-width: 1px;
        box-shadow: 0 4px 14px rgba(0, 82, 204, 0.05);
    }

    .anniversary-fluid-section {
        padding: 45px 0 65px;
    }

    .anniversary-inner-grid {
        padding: 0 16px;
        gap: 24px;
    }

    .anniversary-badge img {
        max-width: 280px;
    }

    .ring-1 {
        width: 280px;
        height: 280px;
    }

    .ring-2 {
        width: 230px;
        height: 230px;
    }

    .ring-3 {
        width: 180px;
        height: 180px;
    }

    .img213 {
        gap: 10px;
    }

    .anniversary-fluid-section p {
        font-size: 14.5px;
    }

    #storyBtn {
        margin-top: 20px;
        width: 100%;
        justify-content: space-between;
        padding: 8px 10px 8px 20px;
    }
}

@media (max-width: 480px) {
    .clients-inner-container {
        padding: 0 8px;
    }

    .clients-slider-track {
        gap: 6px;
    }

    .client-logo {
        width: calc((100vw - 34px) / 4);
        height: clamp(48px, 13vw, 56px);
        padding: 5px 6px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bouncing,
    .bounce-back {
        animation: none;
    }
}

/* ============================================ */
/* SECTION 18: Hero12 Split (Smart Attendance)   */
/* ============================================ */
.video-desktop,
.video-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.video-desktop {
    display: block;
}

.video-mobile {
    display: none;
}

@media (max-width: 768px) {
    .video-desktop {
        display: none;
    }

    .video-mobile {
        display: block;
    }
}

.hero12-split {
    display: flex;
    align-items: stretch;
    min-height: 640px;
}

.hero12-content-col {
    flex: 1 1 46%;
    min-width: 320px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 60px 8%;
    box-sizing: border-box;
    background: #05070d;
}

.hero12-video-col {
    flex: 1 1 54%;
    position: relative;
    background: #0b1c3f;
    overflow: hidden;
}

/* Blends the black text column into the video instead of a hard vertical seam */
.hero12-video-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 190px;
    background: linear-gradient(90deg, #05070d 0%, rgba(5, 7, 13, 0.72) 42%, rgba(5, 7, 13, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero12-video-col::before {
        display: none;
    }
}

/* Screen-reader-only label */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Nudge when Send is pressed with an empty box */
.hero12-search input.is-empty {
    animation: heroInputShake 0.45s ease;
    border-color: #ff6b6b !important;
}

@keyframes heroInputShake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero12-search input.is-empty {
        animation: none;
    }
}

.hero12-video-frame {
    width: 100%;
    height: 100%;
}

.hero12-video-frame .video-desktop {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    z-index: 1 !important;
}

@media (max-width: 992px) {
    .hero12-split {
        flex-direction: column;
        min-height: auto;
    }

    .hero12-video-col {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .hero12-video-col {
        display: none;
    }
}

.hero12-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(11, 28, 63, .55);
    border: 1px solid rgba(79, 163, 255, .5);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    width: fit-content;
}

.hero12-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 24px;
}

.hero12-icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
}

.hero12-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(79, 163, 255, .18);
    border: 1px solid rgba(79, 163, 255, .5);
    color: #4da3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hero12-note {
    font-size: 14px;
    opacity: .85;
    max-width: 560px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero12-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 6px;
    max-width: 480px;
    backdrop-filter: blur(4px);
}

.hero12-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 16px;
    color: #fff;
    font-size: 15px;
}

.hero12-search input::placeholder {
    color: rgba(255, 255, 255, .65);
}

.hero12-search button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2f7de0;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ============================================ */
/* SECTION 18b: Hero12 Features & Stats         */
/* ============================================ */
.hero12-features {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 0 10px;
    overflow: hidden;
    position: relative;
}

/* Fade edges for desktop slider */
.hero12-features::before,
.hero12-features::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.hero12-features::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.hero12-features::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.hero12-features-desktop {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: 16px;
    padding: 0 16px 16px;
    animation: hero12SlideX 14s linear infinite;
}

.hero12-features-desktop:hover {
    animation-play-state: paused;
}

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

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

.hero12-features-mobile {
    display: none !important;
}

.hero12-feature-card {
    flex: 0 0 190px;
    width: 190px;
    text-align: center;
    padding: 24px 16px 22px;
    background: #ffffff;
    border: 1.5px solid #e8eef7;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.hero12-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0, 168, 236, 0.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hero12-feature-card:hover::before {
    opacity: 1;
}

.hero12-feature-card:hover {
    transform: translateY(-7px);
    border-color: #93c5fd;
    box-shadow: 0 18px 36px rgba(0, 100, 220, 0.14), 0 4px 12px rgba(0, 168, 236, 0.1);
}

.hero12-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 14px;
    box-shadow: 0 8px 20px rgba(0, 100, 220, 0.3);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero12-feature-card:hover .hero12-feature-icon {
    transform: scale(1.1) rotate(-8deg);
}

.hero12-feature-card strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #0b1c3f;
    margin-bottom: 7px;
}

.hero12-feature-card span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
}

.hero12-feature-arrow {
    display: none;
}

/* ---- Stats bar ---- */
.hero12-stats-wrap {
    max-width: 1200px;
    margin: 28px auto 40px;
    padding: 0 20px;
}

.hero12-stats-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #051c4a 0%, #004db8 50%, #00a8ec 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    padding: 24px 34px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 70, 180, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero12-stats-bar::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -50px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hero12-stats-bar::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hero12-stat {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.25s ease;
}

.hero12-stat:hover {
    transform: translateY(-2px);
}

.hero12-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero12-stat strong {
    display: block;
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 15, 50, 0.35);
    font-variant-numeric: tabular-nums;
}

.hero12-stat small {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #dbeafe;
    letter-spacing: 0.3px;
    opacity: 0.95;
    display: block;
    margin-top: 1px;
}

.hero12-learn-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: #004db8 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 28px;
    border-radius: 50px;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 20, 60, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero12-learn-btn i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.hero12-learn-btn:hover {
    background: #f8fafc;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0, 20, 60, 0.35);
    color: #00368c !important;
}

.hero12-learn-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .hero12-features {
        padding: 18px 0 6px;
    }

    .hero12-features-desktop {
        display: none !important;
    }

    .hero12-features-mobile {
        display: flex !important;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 4px 0;
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }

    .hero12-slide-row {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .hero12-slide-track {
        display: flex;
        gap: 6px;
        width: max-content;
        will-change: transform;
        animation: hero12SlideLeft 6.5s linear infinite;
    }

    .hero12-slide-track:hover,
    .hero12-slide-track:active {
        animation-play-state: paused;
    }

    .hero12-features-mobile .hero12-feature-card {
        flex: 0 0 86px !important;
        width: 86px !important;
        max-width: 92px !important;
        padding: 8px 4px 6px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
        border: 1px solid #e8eef7 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 72px !important;
    }

    .hero12-features-mobile .hero12-feature-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        margin: 0 auto 4px !important;
        box-shadow: 0 3px 8px rgba(0, 168, 236, 0.22) !important;
    }

    .hero12-features-mobile .hero12-feature-card strong {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #0b1c3f !important;
        margin: 0 !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        text-align: center !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .hero12-features-mobile .hero12-feature-card span {
        display: none !important;
    }

    .hero12-feature-arrow {
        display: none !important;
    }

    .hero12-stats-wrap {
        padding: 0 16px;
        margin: 20px auto 35px;
    }

    .hero12-stats-bar {
        padding: 20px 16px;
        border-radius: 22px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .hero12-stat {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 14px;
        padding: 12px 14px;
        gap: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        width: 100%;
        margin: 0;
    }

    .hero12-stat-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
        border-radius: 11px;
    }

    .hero12-stat strong {
        font-size: 18px;
    }

    .hero12-stat small {
        font-size: 11px;
    }

    .hero12-learn-btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 4px;
        padding: 13px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .hero12-stats-bar {
        padding: 16px 12px;
        gap: 10px;
        border-radius: 18px;
    }

    .hero12-stat {
        padding: 10px 10px;
        gap: 10px;
        border-radius: 12px;
    }

    .hero12-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 9px;
    }

    .hero12-stat strong {
        font-size: 16.5px;
    }

    .hero12-stat small {
        font-size: 10.5px;
    }
}

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

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

@keyframes hero12SlideRight {
    0% {
        transform: translateX(-50%);
    }

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

/* ============================================ */
/* SECTION 19: Services Grid (hello2121)        */
/* ============================================ */
.hello2121 {
    padding: 0px 20px !important;
    background-color: #ffffff !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hello2121 .website-heading-wrapper {
    margin-bottom: 24px;
}

.service-desktop-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
}

.service-mobile-marquee {
    display: none !important;
}

@media (max-width: 1199px) {
    .service-desktop-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 991px) {
    .service-desktop-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .hello2121 {
        padding: 12px 10px 18px !important;
    }

    .hello2121 .service-grid.container,
    #serviceGridRoot {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .service-desktop-grid {
        display: none !important;
    }

    .service-mobile-marquee {
        display: flex !important;
        gap: 4px !important;
        height: 420px !important;
        overflow: hidden !important;
        position: relative !important;
        padding: 4px 0 !important;
        cursor: grab !important;
        touch-action: pan-x !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%) !important;
    }

    .service-mobile-marquee:active,
    .service-marquee-col:active {
        cursor: grabbing !important;
    }

    .service-marquee-col {
        flex: 1 1 0;
        min-width: 0;
        overflow: visible;
        height: 100%;
        position: relative;
        touch-action: pan-x !important;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .service-marquee-track {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        will-change: transform;
        overflow: visible;
        transform: translate3d(0, 0, 0);
        user-select: none;
        -webkit-user-select: none;
    }

    .service-item {
        padding: 8px !important;
        gap: 3px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 58px !important;
        border-radius: 11px !important;
        background: linear-gradient(145deg, #ffffff 0%, #f6faff 100%) !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, border-color 0.2s ease !important;
    }

    .service-item:active {
        transform: scale(0.96) !important;
        border-color: #00a8ec !important;
    }

    .cfms {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .cfms img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 4px rgba(0, 40, 100, 0.12)) !important;
        pointer-events: none !important;
        -webkit-user-drag: none !important;
    }

    .cfmsp {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .cfmsp p:first-child {
        font-size: 9px !important;
        font-weight: 700 !important;
        color: #0b1c3f !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.2px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        display: block !important;
        width: 100% !important;
    }

    .cfmsp p.service-desc-text,
    .cfmsp p:last-child:not(:first-child) {
        display: none !important;
    }

    .service-badge {
        font-size: 7px !important;
        padding: 1px 4px !important;
        top: -4px !important;
        right: 2px !important;
        letter-spacing: 0.3px !important;
        border-radius: 4px !important;
    }
}

@media (max-width: 380px) {
    .hello2121 {
        padding: 10px 8px 16px !important;
    }

    .service-mobile-marquee {
        gap: 3px !important;
    }

    .service-marquee-track {
        gap: 4px;
    }

    .service-item {
        padding: 5px 1px 4px !important;
        min-height: 52px !important;
        border-radius: 8px !important;
    }

    .cfms {
        width: 26px !important;
        height: 26px !important;
    }

    .cfms img {
        width: 24px !important;
        height: 24px !important;
    }

    .cfmsp p:first-child {
        font-size: 7.5px !important;
        letter-spacing: -0.25px !important;
    }
}

.service-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%) !important;
    border-radius: 18px !important;
    padding: 16px 18px;
    border: 1.5px solid #e2eaf4 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(11, 28, 63, 0.04) !important;
    height: auto !important;
    min-height: 90px !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00a8ec, #0052cc);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-item:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    border-color: #00a8ec !important;
    box-shadow: 0 12px 28px rgba(0, 168, 236, 0.15) !important;
}

.service-item:hover::before {
    opacity: 1;
}

.cfms {
    width: 48px;
    height: 48px;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

.service-item:hover .cfms {
    transform: scale(1.08) rotate(2deg) !important;
    /* background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.22) !important; */
}

.cfms img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.cfmsp {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cfmsp p {
    text-align: left !important;
    margin: 0 !important;
}

.cfmsp p:first-child {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px;
    font-weight: 700 !important;
    color: #0b1c3f !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
    transition: color 0.3s ease !important;
}

.service-item:hover .cfmsp p:first-child {
    color: #0077cc !important;
}

.cfmsp p.service-desc-text,
.cfmsp p:last-child:not(:first-child) {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* "NEW" flag for freshly added modules */
.service-item.has-badge {
    position: relative !important;
    overflow: visible !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: linear-gradient(145deg, #f0fdf4 0%, #f8fbff 60%) !important;
}

.service-item.has-badge:hover {
    border-color: #10b981 !important;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.18) !important;
}

.service-badge {
    position: absolute;
    top: -9px;
    right: 12px;
    z-index: 2;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
    animation: serviceBadgePulse 2.2s ease-in-out infinite;
}

@keyframes serviceBadgePulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(23, 169, 93, 0.4);
    }

    50% {
        box-shadow: 0 4px 18px rgba(23, 169, 93, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-badge {
        animation: none;
    }
}

/* ============================================ */
/* SECTION 20: Image Description (Web Awards)   */
/* ============================================ */
.image-description-section {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 50px 0 70px;
    padding: 0;
}

.award-hero-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
    /* Exactly calibrated to trophy showcase image (wewew.webp) so boundaries completely disappear */
    background: linear-gradient(180deg, #070e3e 0%, #011343 20%, #001754 45%, #001c68 70%, #02216f 100%);
    box-shadow: 0 25px 65px rgba(2, 23, 68, 0.45);
}

.award-hero-panel .container {
    max-width: 1440px;
}

/* Floating Golden Confetti */
.confetti {
    position: absolute;
    width: 12px;
    height: 24px;
    background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
    border-radius: 3px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.confetti-1 {
    top: 40px;
    left: 20%;
    transform: rotate(25deg);
    animation: confettiFloat1 5s ease-in-out infinite alternate;
}

.confetti-2 {
    top: 75px;
    left: 45%;
    width: 15px;
    height: 15px;
    transform: rotate(-35deg);
    animation: confettiFloat2 6s ease-in-out infinite alternate;
}

.confetti-3 {
    top: 60px;
    right: 18%;
    width: 14px;
    height: 22px;
    transform: rotate(15deg);
    animation: confettiFloat1 7s ease-in-out infinite alternate;
}

@keyframes confettiFloat1 {
    from {
        transform: translateY(0) rotate(20deg);
    }

    to {
        transform: translateY(-12px) rotate(35deg);
    }
}

@keyframes confettiFloat2 {
    from {
        transform: translateY(0) rotate(-30deg);
    }

    to {
        transform: translateY(-10px) rotate(-15deg);
    }
}

.award-grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    min-height: 560px;
    position: relative;
    z-index: 3;
}

.award-content-col {
    flex: 0 0 45%;
    max-width: 550px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 0;
}

.award-content {
    width: 100%;
    max-width: 580px;
}

.award-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 184, 0, 0.1);
    border: 1.5px solid #ffb800;
    color: #ffc837;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 14px rgba(255, 184, 0, 0.2);
}

.award-eyebrow i {
    color: #ffc837;
}

.award-title {
    font-size: clamp(2.1rem, 2.8vw, 3.2rem);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}

.award-title span {
    color: #00d2ff;
    display: inline-block;
}

.award-desc {
    margin-top: 14px;
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.55;
    max-width: 460px;
}

/* Consult & Phone Cards */
.award-contact-block {
    margin-top: 24px;
}

.award-consult-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 12px;
}

.award-consult-heading i {
    color: #00d2ff;
}

.award-phone-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.award-phone-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(3, 20, 56, 0.92) 0%, rgba(10, 37, 92, 0.88) 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.35);
    text-decoration: none !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.award-phone-pill:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, rgba(3, 20, 56, 0.98) 0%, rgba(14, 48, 118, 0.95) 100%);
    border-color: #00d2ff;
    box-shadow: 0 8px 24px rgba(0, 210, 255, 0.32);
}

.phone-pill-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    box-shadow: 0 4px 14px rgba(0, 168, 236, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    flex-shrink: 0;
}

.phone-pill-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.phone-pill-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #38bdf8;
    line-height: 1.2;
    margin-bottom: 2px;
}

.phone-pill-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.award-action-wrap {
    margin-top: 18px;
}

.award-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 32px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1.05rem;
    background: #ffffff;
    color: #051a44 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.award-whatsapp-btn i {
    color: #25d366;
    font-size: 1.2rem;
}

.award-whatsapp-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Trust Badges Bottom Left */
.award-trust-badges {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.award-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.award-trust-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    color: #4dc9ff;
    flex-shrink: 0;
}

/* Right Column: Contained Showcase Image */
.award-trophies-col {
    flex: 0 0 55%;
    max-width: 800px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.award-trophies-glow {
    display: none;
}

.award-trophies-img {
    width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: contain;
    object-position: center center;
    display: block;
    filter: drop-shadow(0 20px 45px rgba(0, 20, 80, 0.5));
    /* Seamless dissolve: radial feather around the glow & soft edge dissolves completely remove any box outline */
    -webkit-mask-image: radial-gradient(ellipse 90% 86% at 50% 48%, #000 60%, rgba(0, 0, 0, 0.8) 75%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 94%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 90% 86% at 50% 48%, #000 60%, rgba(0, 0, 0, 0.8) 75%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 94%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}

.award-trophies-img:hover {
    transform: scale(1.02);
}

@media (max-width: 1200px) and (min-width: 992px) {
    .award-content-col {
        flex: 0 0 48%;
        max-width: 500px;
    }

    .award-trophies-col {
        flex: 0 0 52%;
        max-width: 600px;
    }

    .award-trophies-img {
        max-height: 540px;
    }
}

@media (max-width: 991px) {
    .award-hero-panel {
        padding: 0 0 50px;
        background: linear-gradient(180deg, #070e3e 0%, #011343 20%, #001754 45%, #001c68 70%, #02216f 100%);
    }

    .award-grid-wrapper {
        flex-direction: column;
        min-height: auto;
        gap: 20px;
    }

    .award-trophies-col {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 35px 0 0;
        margin: 0;
    }

    .award-trophies-img {
        width: 100%;
        max-width: 520px;
        height: auto;
        max-height: 440px;
        object-fit: contain;
        object-position: center bottom;
        display: block;
    }

    .award-content-col {
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
        padding: 10px 16px 20px;
        justify-content: center;
    }

    .award-content {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
    }

    .award-desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .award-consult-heading {
        justify-content: center;
    }

    .award-phone-row {
        justify-content: center;
    }

    .award-action-wrap {
        display: flex;
        justify-content: center;
    }

    .award-trust-badges {
        justify-content: center;
        gap: 14px;
    }
}

@media (max-width: 576px) {
    .award-hero-panel {
        padding: 0 0 35px;
    }

    .award-title {
        font-size: 1.85rem;
    }

    .award-content-col {
        padding: 10px 12px 15px;
    }

    .award-phone-row {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .award-phone-pill {
        width: 100%;
        padding: 12px 16px;
        gap: 14px;
    }

    .phone-pill-icon {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .phone-pill-label {
        font-size: 10.5px;
        color: #38bdf8;
    }

    .phone-pill-num {
        font-size: 1.3rem;
        font-weight: 900;
    }

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

    .award-trust-badges {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        margin-top: 18px !important;
    }

    .award-trust-item {
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }

    .confetti {
        display: none;
    }
}

/* ============================================ */
/* SECTION 22: Analytics Section                */
/* ============================================ */
.analytics-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    padding: 0px 5%;
    flex-wrap: wrap;
}

.analytics-content {
    flex: 1 1 380px;
    max-width: 460px;
}

.analytics-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 168, 236, 0.1);
    border: 1px solid rgba(0, 168, 236, 0.28);
    color: #0079ab;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.analytics-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 20px;
    color: #0f172a;
    letter-spacing: -1.2px;
}

.analytics-title span {
    color: #00A8EC !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #00A8EC !important;
}

.analytics-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 440px;
}

.analytics-btn {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #fff !important;
    padding: 14px 30px;
    text-decoration: none !important;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(0, 168, 236, 0.35);
    transition: all 0.3s ease;
}

.analytics-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 168, 236, 0.48);
    color: #fff !important;
}

/* ---- The video gets a lit stage so it reads as the focal point ---- */
.analytics-video-wrapper {
    flex: 1 1 560px;
    max-width: 720px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.analytics-stage {
    position: relative;
    width: 100%;
    padding: 16px;
    border-radius: 26px;
    background: linear-gradient(150deg, #0b1e42 0%, #061530 55%, #04101f 100%);
    box-shadow: 0 30px 70px rgba(4, 16, 31, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Coloured bloom spilling out from behind the stage */
.analytics-stage::before {
    content: "";
    position: absolute;
    inset: -18% -10%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 168, 236, 0.35) 0%, rgba(0, 82, 204, 0.16) 42%, rgba(0, 82, 204, 0) 72%);
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
    animation: analyticsGlow 5s ease-in-out infinite alternate;
}

@keyframes analyticsGlow {
    from {
        opacity: 0.75;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

.analytics-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #04101f;
}

.analytics-frame-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 16px;
    background: linear-gradient(180deg, #14284d 0%, #0d1e3c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.afb-dots {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fc6058;
    box-shadow: 15px 0 0 #fdbc40, 30px 0 0 #34c749;
    margin-right: 30px;
}

.afb-title {
    flex: 1;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afb-live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 999px;
    padding: 4px 10px;
}

.afb-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4d4d;
    animation: analyticsLive 1.4s ease-in-out infinite;
}

@keyframes analyticsLive {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 0 5px rgba(255, 77, 77, 0);
    }
}

.analytics-video {
    width: 100%;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 991px) {
    .analytics-section {
        padding: 20px 5%;
        gap: 30px;
        text-align: center;
    }

    .analytics-content {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .analytics-eyebrow {
        margin-bottom: 12px;
        padding: 6px 14px;
        font-size: 11.5px;
    }

    .analytics-video-wrapper {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .analytics-title {
        font-size: 2.2rem;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .analytics-title span {
        white-space: nowrap;
    }

    .analytics-text {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .analytics-btn {
        padding: 12px 26px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .analytics-section {
        padding: 15px 16px;
        gap: 24px;
    }

    .analytics-title {
        font-size: clamp(1.45rem, 5.8vw, 1.85rem);
        letter-spacing: -0.5px;
        margin-bottom: 10px;
    }

    .analytics-title span {
        white-space: nowrap;
    }

    .analytics-text {
        font-size: 0.92rem;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .analytics-stage {
        padding: 8px;
        border-radius: 18px;
    }

    .analytics-frame-bar {
        height: 32px;
        padding: 0 10px;
        gap: 8px;
    }

    .afb-title {
        font-size: 11px;
    }

    .afb-dots {
        margin-right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .analytics-stage::before,
    .afb-live i {
        animation: none;
    }
}

/* ============================================ */
/* SECTION 21: Cards Wrapper & Lightbox         */
/* ============================================ */
.cards-wrapper {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px 15px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    justify-items: center;
    align-items: flex-start;
}

.card-item {
    width: 100%;
    max-width: 200px;
    text-align: center;
    perspective: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-flip {
    position: relative;
    width: 100%;
    height: 223px;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
}

.card-item:hover .card-flip {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front {
    z-index: 2;
}

.card-back {
    transform: rotateY(180deg);
}

.card-face img,
.card-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s;
}

.card-thumb:hover {
    transform: scale(1.05);
}

.card-title {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    line-height: 1.3;
    text-align: center;
}

.card-hidden {
    display: none !important;
}

.cards-toggle-btn {
    grid-column: 1 / -1;
    margin: 40px auto 10px;
    padding: 13px 36px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: white;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 168, 236, 0.38);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    animation: viewMorePulse 2.8s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cards-toggle-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: rotate(25deg);
    animation: btnShimmer 3.2s ease-in-out infinite;
}

@keyframes btnShimmer {
    0% {
        left: -75%;
    }

    35%,
    100% {
        left: 150%;
    }
}

@keyframes viewMorePulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 20px rgba(0, 168, 236, 0.38), 0 0 0 0 rgba(0, 168, 236, 0.45);
    }

    50% {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 10px 28px rgba(0, 82, 204, 0.52), 0 0 0 8px rgba(0, 168, 236, 0);
    }
}

.view-more-icon {
    font-size: 13.5px;
    transition: transform 0.3s ease;
    animation: iconBounce 1.6s ease-in-out infinite;
}

@keyframes iconBounce {

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

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

.cards-toggle-btn:hover {
    background: linear-gradient(135deg, #00b8ff 0%, #0045b4 100%);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 168, 236, 0.6), 0 0 20px rgba(0, 168, 236, 0.35);
}

.cards-toggle-btn:hover .view-more-icon {
    transform: translateY(4px);
}

@media (max-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cards-wrapper {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        margin: 0 auto !important;
    }

    .card-item {
        width: 100% !important;
        max-width: 125px !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .card-flip {
        height: 125px !important;
    }

    .card-thumb {
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 6px !important;
    }

    .card-title {
        margin-top: 2px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        line-height: 1.18 !important;
        text-align: center !important;
        word-break: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* Card Modal Popup */
.card-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.card-modal-img {
    max-width: 80vw;
    max-height: 82vh;
    border-radius: 14px;
    object-fit: contain;
}

.card-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 45px;
    color: #ffffff;
    cursor: pointer;
    z-index: 100000;
    line-height: 1;
    user-select: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.card-modal-close:hover {
    color: #ff4d4d;
    transform: scale(1.15);
}

.nav-btn111 {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: transform 0.2s ease;
}

.nav-btn111:hover {
    transform: scale(1.15);
}

.nav-btn111 img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .card-modal-img {
        max-width: 90vw;
        max-height: 65vh;
    }

    .nav-btn111 img {
        width: 32px;
        height: 32px;
    }

    .card-modal-close {
        top: 15px;
        right: 20px;
        font-size: 36px;
    }
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    animation: zoomIn 0.3s ease;
}

.lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#hover-label {
    position: absolute;
    background: rgba(17, 24, 39, .95);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    transform: translate(-50%, -120%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
    white-space: nowrap;
    z-index: 50;
}

.pin {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #94a3b8;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    z-index: 5;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

/* Districts we actually have clients in get the brand colour and a halo */
.pin-active {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #00a8ec, #0052cc);
    box-shadow: 0 2px 8px rgba(0, 82, 204, .4), 0 0 0 5px rgba(0, 168, 236, .16);
}

.pin:hover,
.pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.45);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 6px rgba(0, 168, 236, .22);
    outline: none;
    z-index: 10;
}

/* SVG Native Map Pins - Mathematically Anchored to District Geometry */
.map-svg-pin {
    cursor: pointer;
    outline: none;
    pointer-events: auto;
}

.map-svg-pin .pin-scaler {
    transform-origin: 0px 0px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-svg-pin:hover .pin-scaler,
.map-svg-pin.hovered .pin-scaler {
    transform: scale(1.35);
}

.map-svg-pin .svg-pin-halo {
    fill: rgba(0, 168, 236, 0.3);
    animation: svgPinPulse 2.2s infinite ease-out;
    transform-origin: 0px 0px;
    pointer-events: none;
}

@keyframes svgPinPulse {
    0% {
        r: 11px;
        opacity: 0.9;
    }
    70% {
        r: 26px;
        opacity: 0;
    }
    100% {
        r: 26px;
        opacity: 0;
    }
}

.map-svg-pin .svg-pin-base {
    fill: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    transition: filter 0.22s ease;
}

.map-svg-pin:hover .svg-pin-base,
.map-svg-pin.hovered .svg-pin-base {
    filter: drop-shadow(0 3px 12px rgba(0, 132, 214, 0.6));
}

.map-svg-pin.pin-active .svg-pin-inner {
    fill: #0084d6;
}

.map-svg-pin:not(.pin-active) .svg-pin-inner {
    fill: #94a3b8;
}

.map-svg-pin .svg-pin-dot {
    fill: #ffffff;
}

/* Map Modal */
#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 28, 63, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100005 !important;
    padding: 16px;
    animation: mapModalFadeIn 0.22s ease-out;
}

#modal.active,
#modal[style*="display: flex"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100005 !important;
}

.svg-pin-hitarea {
    cursor: pointer !important;
    pointer-events: all !important;
}

#modal-content {
    background: #ffffff;
    padding: 20px 16px 18px;
    border-radius: 20px;
    max-width: 430px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(11, 28, 63, 0.25), 0 0 0 1px rgba(0, 168, 236, 0.12);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    animation: mapModalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-drag-handle {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: #e2e8f0;
    margin: 0 auto 12px auto;
}

#modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

#modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: scale(1.08);
}

.modal-district {
    font-size: 20px;
    font-weight: 800;
    color: #0b1c3f;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #f8fafc;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    padding: 10px 5px 8px 5px;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 94px;
}

.logo-item:hover {
    background: #ffffff;
    border-color: #00a8ec;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.12);
}

.logo-item img {
    width: 100%;
    max-width: 92px;
    height: 42px;
    object-fit: contain;
    margin-bottom: 6px;
    border: none;
    background: transparent;
    border-radius: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
}

.logo-item p {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #334155;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    width: 100%;
}

.modal-message {
    background: linear-gradient(135deg, rgba(0, 168, 236, 0.07), rgba(0, 82, 204, 0.04));
    border: 1px solid rgba(0, 168, 236, 0.2);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 12px 0 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #1e293b;
    font-weight: 500;
    text-align: center;
}

@keyframes mapModalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mapModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }

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

/* ============================================ */
/* SECTION 23: Who We Are (Hello Section)       */
/* ============================================ */
.hellosection {
    position: relative;
    color: #ffffff;
    padding: 65px 24px 75px !important;
    text-align: left;
    overflow: hidden;
}

.hello-bg {
    /*background-image: url('img/Remaining Image/hello.webp');*/
    background-image: url('img/hello-v2.webp');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (hover: none),
(pointer: coarse) {
    .hello-bg {
        background-attachment: scroll;
    }
}

.hello-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(3, 11, 28, 0.92) 0%, rgba(3, 12, 32, 0.82) 46%, rgba(2, 10, 26, 0.48) 85%, rgba(2, 10, 26, 0.38) 100%),
        radial-gradient(circle at 85% 65%, rgba(0, 168, 255, 0.10) 0%, transparent 60%);
}

.hello-grid-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 45px;
    position: relative;
    z-index: 3;
}

.hello-content-col {
    flex: 0 0 56%;
    max-width: 620px;
    margin-left: 0;
}

.hello-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    margin: 0 0 16px;
    backdrop-filter: blur(8px);
}

.hello-subtitle i {
    color: #00d2ff;
}

.hello-title {
    font-size: clamp(1.9rem, 2.7vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    line-height: 1.18;
    color: #ffffff;
    word-break: break-word;
}

.hello-title span {
    color: #00d2ff;
    display: inline-block;
}

.hello-desc {
    font-size: 0.98rem;
    line-height: 1.68;
    color: #cbd5e1;
    margin: 0 0 14px;
}

.hello-desc strong {
    color: #ffffff;
}

/* Key Feature Pills */
.hello-feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}

.hello-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 7px 14px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hello-pill-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    border-color: #00d2ff;
}

.hello-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hello-btn,
.hello-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.hello-btn {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(0, 82, 204, 0.45);
}

.hello-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 168, 236, 0.55);
}

.hello-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
}

.hello-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
    transform: translateY(-3px);
}

@media (max-width: 991px) {

    .image-description-section {
        margin: 50px 0 20px;
    }

    .hellosection {
        padding: 75px 24px 75px !important;
    }

    .hello-overlay {
        background: linear-gradient(180deg, rgba(3, 11, 28, 0.88) 0%, rgba(3, 12, 32, 0.84) 100%);
    }

    .hello-bg {
        background-position: center center;
    }

    .hello-content-col {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
        padding: 0 4px;
        margin-left: 0;
    }

    .hello-feature-pills {
        justify-content: center;
    }

    .hello-actions {
        justify-content: center;
    }
}

@media (max-width: 575px) {

    .image-description-section {
        margin: 50px 0 20px;
    }

    .hellosection {
        padding: 65px 20px 65px !important;
    }

    .hello-title {
        font-size: clamp(1.65rem, 6.2vw, 2.1rem);
        line-height: 1.22;
    }

    .hello-desc {
        font-size: 0.93rem;
        line-height: 1.65;
    }

    .hello-feature-pills {
        gap: 8px;
    }

    .hello-pill-item {
        font-size: 11.5px;
        padding: 6px 12px;
    }

    .hello-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

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

/* ============================================ */
/* SECTION 24: Business Owners Tabbed Products  */
/* ============================================ */
.section-container {
    padding: 44px clamp(14px, 4vw, 40px) 40px;
    position: relative;
    border-radius: 28px;
    /* background:
        radial-gradient(circle at 14% 8%, rgba(0, 168, 236, 0.08), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(0, 82, 204, 0.07), transparent 46%),
        #f8fbfe;
    border: 1px solid #eef3fa; */
    overflow: hidden;
}

.section-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}

.section-container .website-heading-wrapper {
    margin-bottom: 26px;
    position: relative;
}

.tpx-badge {
    background: rgba(0, 168, 236, 0.1) !important;
    border-color: rgba(0, 168, 236, 0.28) !important;
    color: #0079ab !important;
}

/* ---- Tab bar: a segmented pill control ---- */
.section-container .tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 auto 22px;
    padding: 6px;
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid #e6eef7;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    width: fit-content;
    max-width: 100%;
}

.section-container .tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.section-container .tab i {
    font-size: 13px;
    color: #94a3b8;
    transition: color 0.3s ease;
}

.section-container .tab:hover {
    color: #00a8ec;
    background: rgba(0, 168, 236, 0.07);
}

.section-container .tab:hover i {
    color: #00a8ec;
}

.section-container .tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    box-shadow: 0 6px 16px rgba(0, 168, 236, 0.35);
}

.section-container .tab.active i {
    color: #ffffff;
}

.section-container .tab:focus-visible {
    outline: 2px solid #0052cc;
    outline-offset: 2px;
}

/* ---- Panel wrapper (holds the sub-chip row + the spotlight card) ---- */
.section-container .content {
    display: none;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.section-container .content.active-content {
    display: flex;
    animation: tpxFadeIn 0.45s ease;
}

@keyframes tpxFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ---- Sub-product chips ---- */
.section-container .features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.feature-btn1 {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.feature-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 7px 16px;
    transition: all 0.25s ease;
}

.feature-item::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='8 12 11 15 16 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.25s ease;
}

.feature-btn1:hover .feature-item {
    color: #00a8ec;
    border-color: #9fdcf7;
    background: #ffffff;
    transform: translateY(-2px);
}

.feature-btn1.is-active .feature-item {
    color: #ffffff;
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 168, 236, 0.32);
}

.feature-btn1.is-active .feature-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='8 12 11 15 16 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ---- Spotlight card: unifies the media + copy into one polished panel ---- */
.tpx-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 36px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.07);
}

/* ---- Media showcase: works for product photos, screenshots & videos alike ---- */
.section-container .images {
    flex: 1 1 420px;
    max-width: 480px;
    height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: white;
    border: 1px solid #e9eff6;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.section-container .images::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.16), transparent 70%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

.section-container .images img,
.section-container .images video {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* filter: drop-shadow(0 16px 20px rgba(15, 23, 42, 0.14)); */
}

.section-container .images video {
    border-radius: 12px;
    filter: none;
    /* box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16); */
}

/* ---- Copy side ---- */
.section-container .text {
    flex: 1 1 360px;
    min-width: 0;
}

.tpx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #0079ab;
    background: rgba(0, 168, 236, 0.1);
    border: 1px solid rgba(0, 168, 236, 0.2);
    border-radius: 999px;
    padding: 5px 13px 5px 11px;
    margin-bottom: 14px;
}

.tpx-eyebrow i {
    font-size: 11px;
}

.tpx-title {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.22;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
}

.tpx-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 22px;
}

.tpx-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tpx-btn,
.tpx-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.tpx-btn {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 168, 236, 0.33);
}

.tpx-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 168, 236, 0.45);
}

.tpx-btn-ghost {
    background: #ffffff;
    color: #0f172a !important;
    border: 1.5px solid #dbe4ee;
}

.tpx-btn-ghost i {
    color: #25d366;
    font-size: 1rem;
}

.tpx-btn-ghost:hover {
    border-color: #25d366;
    color: #128c3e !important;
    transform: translateY(-2px);
}

/* ---- Carousel ---- */
.tpx-carousel {
    position: relative;
    overflow: hidden;
}

.tpx-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tpx-carousel-img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    z-index: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    /* filter: drop-shadow(0 16px 20px rgba(15, 23, 42, 0.14)); */
}

.tpx-carousel-img.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.tpx-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #0052cc;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transition: all 0.2s ease;
}

.tpx-carousel-btn:hover {
    background: #00a8ec;
    color: #fff;
    border-color: transparent;
}

.tpx-carousel-prev {
    left: 10px;
}

.tpx-carousel-next {
    right: 10px;
}

.tpx-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.tpx-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 82, 204, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tpx-carousel-dot.is-active {
    background: #00a8ec;
    width: 18px;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .section-container {
        padding: 34px 18px 30px;
    }

    .tpx-panel {
        padding: 22px;
        gap: 22px;
    }

    .tpx-title {
        font-size: 23px;
    }
}

@media (max-width: 767px) {
    .section-container {
        padding: 28px 12px 24px;
        border-radius: 20px;
        margin: 20px auto;
    }

    /* Tab bar scrolls sideways instead of wrapping into a tall block */
    .section-container .tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        border-radius: 16px;
        scrollbar-width: none;
        margin-bottom: 16px;
    }

    .section-container .tabs::-webkit-scrollbar {
        display: none;
    }

    .section-container .tab {
        padding: 9px 14px;
        font-size: 12px;
    }

    .section-container .content {
        gap: 14px;
    }

    .tpx-panel {
        padding: 16px;
        gap: 18px;
        border-radius: 16px;
    }

    .section-container .images,
    .section-container .text {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .section-container .images {
        height: 240px;
        padding: 18px;
    }

    .feature-item {
        font-size: 12px;
        padding: 6px 12px;
    }

    .tpx-title {
        font-size: 20px;
    }

    .tpx-desc {
        font-size: 13.5px;
        line-height: 1.55;
    }

    .tpx-actions .tpx-btn,
    .tpx-actions .tpx-btn-ghost {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-container .content.active-content {
        animation: none;
    }
}

/* ============================================ */
/* SECTION 25: What Will You Create             */
/* ============================================ */
/* ============================================ */
/* SECTION 25: What Will You Create (CTA Banner)*/
/* ============================================ */
.what-will-you-create-section {
    display: block;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.create-panel {
    position: relative;
    overflow: hidden;
    padding: 35px 0 20px;
    border-radius: 0;
    width: 100%;
    background: linear-gradient(135deg, #06152d 0%, #0a2558 45%, #0052cc 100%);
    box-shadow: 0 25px 60px rgba(6, 21, 45, 0.35);
}

/* Abstract Doodles & Airplanes */
.create-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.airplane-1 {
    top: 35px;
    left: 46%;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.65);
    transform: rotate(-25deg);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    animation: planeDrift1 6s ease-in-out infinite alternate;
}

.airplane-2 {
    top: 70px;
    right: 12%;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.5);
    transform: rotate(-15deg);
    animation: planeDrift2 7s ease-in-out infinite alternate;
}

.dots-grid-1 {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

.dots-grid-2 {
    position: absolute;
    bottom: 60px;
    left: 40%;
    width: 75px;
    height: 75px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

@keyframes planeDrift1 {
    from {
        transform: translateY(0) rotate(-25deg);
    }

    to {
        transform: translateY(-10px) translateX(6px) rotate(-22deg);
    }
}

@keyframes planeDrift2 {
    from {
        transform: translateY(0) rotate(-15deg);
    }

    to {
        transform: translateY(-8px) translateX(-5px) rotate(-18deg);
    }
}

/* Bottom Decorative SVG Waves */
.create-wave-decor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.create-wave-decor svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.create-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.create-content {
    flex: 1 1 420px;
    max-width: 480px;
}

.create-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

.create-eyebrow i {
    color: #ffca28;
}

.create-title {
    font-size: clamp(2.2rem, 3.2vw, 3.3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}

.create-title span {
    color: #00d2ff;
    display: inline-block;
}

.create-desc {
    margin-top: 14px;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 460px;
}

.create-buttons-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.create-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    background: #ffffff;
    color: #0b45b4 !important;
    box-shadow: 0 10px 25px rgba(0, 20, 60, 0.2);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.create-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0, 20, 60, 0.3);
}

.create-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    background: #25d366;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.create-btn-secondary:hover {
    background: #1eb956;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45);
}

.create-trust-pills {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.create-trust-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
}

.trust-pill-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #6ee7ff;
    flex-shrink: 0;
}

/* 3D Mockup Frame (Prominent Large Showcase) */
.create-image-wrapper {
    position: relative;
    z-index: 2;
    flex: 1 1 580px;
    max-width: 740px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.create-mockup-frame {
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.create-mockup-frame img {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 20px 45px rgba(0, 15, 50, 0.42));
    transition: transform 0.4s ease, filter 0.4s ease;
}

.create-mockup-frame:hover img {
    transform: translateY(-5px) scale(1.02);
    filter: drop-shadow(0 26px 52px rgba(0, 15, 50, 0.52));
}

/* Floating Glassmorphism Feature Badges around 3D Mockup */
.create-float-badge {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 14px;
    background: rgba(6, 21, 45, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(0, 168, 236, 0.45);
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(0, 10, 35, 0.4), 0 0 20px rgba(0, 168, 236, 0.2);
    cursor: default;
    user-select: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    white-space: nowrap;
}

.create-float-badge:hover {
    transform: translateY(-5px) scale(1.04) !important;
    border-color: rgba(0, 210, 255, 0.85);
    box-shadow: 0 18px 42px rgba(0, 10, 35, 0.5), 0 0 28px rgba(0, 168, 236, 0.4);
}

.badge-top-left {
    top: 25px;
    left: -20px;
    animation: floatBadgeA 5s ease-in-out infinite alternate;
}

.badge-bottom-left {
    bottom: 25px;
    left: 20px;
    animation: floatBadgeB 6s ease-in-out infinite alternate;
}

.badge-top-right {
    top: 30px;
    right: -10px;
    animation: floatBadgeC 5.5s ease-in-out infinite alternate;
}

@keyframes floatBadgeA {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-12px) rotate(-1deg);
    }
}

@keyframes floatBadgeB {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-10px) translateX(6px) rotate(1deg);
    }
}

@keyframes floatBadgeC {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-14px) rotate(1.5deg);
    }
}

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

.icon-yellow {
    background: rgba(255, 193, 7, 0.18);
    color: #ffca28;
    border: 1px solid rgba(255, 193, 7, 0.35);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.25);
}

.icon-cyan {
    background: rgba(0, 210, 255, 0.18);
    color: #00e5ff;
    border: 1px solid rgba(0, 210, 255, 0.35);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
}

.icon-green {
    background: rgba(37, 211, 102, 0.18);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.35);
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.25);
}

.float-badge-info strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.float-badge-info span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .what-will-you-create-section {
        margin: 25px 0 30px;
    }

    .create-panel {
        padding: 28px 16px 18px;
    }

    .create-grid-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .create-content {
        flex: 0 0 auto !important;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .create-desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .create-buttons-wrap {
        justify-content: center;
        margin-top: 16px;
    }

    .create-trust-pills {
        justify-content: center;
        gap: 14px;
        margin-top: 16px;
    }

    .create-image-wrapper {
        flex: 0 0 auto !important;
        width: 100%;
        max-width: 540px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .create-mockup-frame {
        justify-content: center;
        width: 100%;
    }

    .badge-top-left {
        top: 10px;
        left: 0;
    }

    .badge-top-right {
        top: 12px;
        right: 0;
    }

    .badge-bottom-left {
        bottom: 10px;
        left: 10px;
    }
}

@media (max-width: 576px) {
    .what-will-you-create-section {
        margin: 15px 0 20px;
    }

    .create-panel {
        padding: 24px 12px 18px;
    }

    .create-grid-row {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .create-content {
        flex: 0 0 auto !important;
        width: 100%;
        max-width: 100%;
    }

    .create-eyebrow {
        font-size: 11.5px;
        padding: 4px 12px;
        margin-bottom: 6px;
    }

    .create-title {
        font-size: 1.75rem;
        line-height: 1.15;
    }

    .create-desc {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-top: 6px;
    }

    .create-buttons-wrap {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
    }

    .create-btn-primary,
    .create-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 10px 18px;
        font-size: 14px;
    }

    .create-trust-pills {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 12px;
        margin-bottom: 4px;
    }

    .create-trust-pill {
        font-size: 11.5px;
        gap: 6px;
    }

    .trust-pill-icon {
        width: 24px;
        height: 24px;
        font-size: 10.5px;
    }

    .create-image-wrapper {
        flex: 0 0 auto !important;
        max-width: 100%;
        width: 100%;
        margin-top: 12px;
        padding: 0;
    }

    .create-mockup-frame img {
        max-width: 96%;
        margin: 0 auto;
    }

    .create-wave-decor {
        height: 40px;
    }

    .create-float-badge {
        padding: 5px 8px;
        border-radius: 8px;
        gap: 5px;
        box-shadow: 0 6px 16px rgba(0, 10, 35, 0.35);
    }

    .float-badge-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
        border-radius: 6px;
    }

    .float-badge-info strong {
        font-size: 9.5px;
        line-height: 1.15;
    }

    .float-badge-info span {
        font-size: 7.5px;
        line-height: 1.1;
    }

    .badge-top-left {
        top: 2px;
        left: 2px;
    }

    .badge-top-right {
        top: 4px;
        right: 2px;
    }

    .badge-bottom-left {
        bottom: 2px;
        left: 4px;
    }

    .airplane-1,
    .airplane-2,
    .dots-grid-1,
    .dots-grid-2 {
        display: none;
    }
}

/* ============================================ */
/* SECTION 26: Milestone Map (Timeline)        */
/* ============================================ */
#ourStory {
    scroll-margin-top: 80px;
}

.milestone-skip-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 5px;
}

.milestone-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background: #f0f9ff;
    color: #0084c7;
    border: 1.5px solid #bae6fd;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 168, 236, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.milestone-skip-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.milestone-skip-btn:hover {
    background: linear-gradient(135deg, #00a8ec, #0070e0);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 168, 236, 0.28);
}

.milestone-skip-btn:hover i {
    transform: translateY(3px);
}

/* Floating Sticky Milestone Skip Pill - Light Cyan Theme */
.milestone-floating-skip {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(40px) scale(0.9);
    z-index: 99980;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
}

.milestone-floating-skip.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.milestone-floating-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px 9px 16px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(0, 168, 236, 0.5);
    border-radius: 50px;
    color: #0084c7 !important;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0, 168, 236, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.milestone-floating-btn:hover {
    background: linear-gradient(135deg, #00a8ec 0%, #0066cc 100%);
    border-color: transparent;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 168, 236, 0.35);
    color: #ffffff !important;
}

/* Pulsing radar dot */
.mfs-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00a8ec;
    box-shadow: 0 0 8px rgba(0, 168, 236, 0.8);
    animation: mfsPulse 1.8s infinite ease-in-out;
}

.milestone-floating-btn:hover .mfs-pulse-dot {
    background: #ffffff;
    box-shadow: 0 0 10px #ffffff;
}

@keyframes mfsPulse {

    0%,
    100% {
        transform: scale(0.85);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
        box-shadow: 0 0 12px rgba(0, 168, 236, 1);
    }
}

/* Icon circle with bouncy arrow */
.mfs-icon-wrap {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 168, 236, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    color: #00a8ec;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.milestone-floating-btn:hover .mfs-icon-wrap {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(2px);
}

.mfs-icon-wrap i {
    animation: mfsBounce 1.5s infinite ease-in-out;
}

@keyframes mfsBounce {

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

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

@media (max-width: 575px) {
    .milestone-floating-btn {
        padding: 8px 16px 8px 13px;
        font-size: 12px;
    }

    .milestone-floating-skip {
        bottom: 20px;
    }
}

.timeline {
    --line-progress: 0%;
    position: relative;
    margin: 40px auto;
    padding: 20px 0;
    width: 100%;
    display: block;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e2e8f0;
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 1;
    display: block;
}

.timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: var(--line-progress, 0%);
    background: linear-gradient(180deg, #0284c7 0%, #059669 12%, #6366f1 24%, #d97706 36%, #e11d48 48%, #0891b2 60%, #9333ea 72%, #ea580c 82%, #2563eb 90%, #0d9488 95%, #c026d3 100%);
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.65);
    transition: height 0.08s linear;
    display: block;
}

/* ============================================ */
/* SECTION 26: Colorful Themes per Milestone    */
/* ============================================ */
.timeline-row {
    --tl-primary: #0284c7;
    --tl-secondary: #0369a1;
    --tl-grad: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --tl-glow: rgba(2, 132, 199, 0.35);
    --tl-bg-soft: #f0f9ff;
    --tl-border: rgba(2, 132, 199, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0;
    position: relative;
    z-index: 5;
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Theme 1: 2012 - Cyan / Azure Blue */
.timeline-row.tl-theme-1 {
    --tl-primary: #0284c7;
    --tl-secondary: #0369a1;
    --tl-grad: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --tl-glow: rgba(2, 132, 199, 0.35);
    --tl-bg-soft: #f0f9ff;
    --tl-border: rgba(2, 132, 199, 0.35);
}

/* Theme 2: 2016 - Emerald Green */
.timeline-row.tl-theme-2 {
    --tl-primary: #059669;
    --tl-secondary: #047857;
    --tl-grad: linear-gradient(135deg, #10b981 0%, #047857 100%);
    --tl-glow: rgba(16, 185, 129, 0.35);
    --tl-bg-soft: #ecfdf5;
    --tl-border: rgba(16, 185, 129, 0.35);
}

/* Theme 3: 2017 - Royal Indigo / Violet */
.timeline-row.tl-theme-3 {
    --tl-primary: #6366f1;
    --tl-secondary: #4338ca;
    --tl-grad: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    --tl-glow: rgba(99, 102, 241, 0.35);
    --tl-bg-soft: #eef2ff;
    --tl-border: rgba(99, 102, 241, 0.35);
}

/* Theme 4: 2018 - Sunset Amber */
.timeline-row.tl-theme-4 {
    --tl-primary: #d97706;
    --tl-secondary: #b45309;
    --tl-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --tl-glow: rgba(245, 158, 11, 0.35);
    --tl-bg-soft: #fffbeb;
    --tl-border: rgba(245, 158, 11, 0.35);
}

/* Theme 5: 2019 - Rose Crimson */
.timeline-row.tl-theme-5 {
    --tl-primary: #e11d48;
    --tl-secondary: #be123c;
    --tl-grad: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
    --tl-glow: rgba(244, 63, 94, 0.35);
    --tl-bg-soft: #fff1f2;
    --tl-border: rgba(244, 63, 94, 0.35);
}

/* Theme 6: 2020 - Electric Teal */
.timeline-row.tl-theme-6 {
    --tl-primary: #0891b2;
    --tl-secondary: #0e7490;
    --tl-grad: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
    --tl-glow: rgba(6, 182, 212, 0.35);
    --tl-bg-soft: #ecfeff;
    --tl-border: rgba(6, 182, 212, 0.35);
}

/* Theme 7: 2021 - Amethyst Purple */
.timeline-row.tl-theme-7 {
    --tl-primary: #9333ea;
    --tl-secondary: #7e22ce;
    --tl-grad: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    --tl-glow: rgba(168, 85, 247, 0.35);
    --tl-bg-soft: #faf5ff;
    --tl-border: rgba(168, 85, 247, 0.35);
}

/* Theme 8: 2023 - Vivid Coral Orange */
.timeline-row.tl-theme-8 {
    --tl-primary: #ea580c;
    --tl-secondary: #c2410c;
    --tl-grad: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    --tl-glow: rgba(249, 115, 22, 0.35);
    --tl-bg-soft: #fff7ed;
    --tl-border: rgba(249, 115, 22, 0.35);
}

/* Theme 9: 2024 - Ultramarine Blue */
.timeline-row.tl-theme-9 {
    --tl-primary: #2563eb;
    --tl-secondary: #1d4ed8;
    --tl-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --tl-glow: rgba(59, 130, 246, 0.35);
    --tl-bg-soft: #eff6ff;
    --tl-border: rgba(59, 130, 246, 0.35);
}

/* Theme 10: 2025 - Mint Emerald */
.timeline-row.tl-theme-10 {
    --tl-primary: #0d9488;
    --tl-secondary: #0f766e;
    --tl-grad: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --tl-glow: rgba(20, 184, 166, 0.35);
    --tl-bg-soft: #f0fdfa;
    --tl-border: rgba(20, 184, 166, 0.35);
}

/* Theme 11: 2026 - Pink Magenta */
.timeline-row.tl-theme-11 {
    --tl-primary: #c026d3;
    --tl-secondary: #a21caf;
    --tl-grad: linear-gradient(135deg, #d946ef 0%, #a21caf 100%);
    --tl-glow: rgba(217, 70, 239, 0.35);
    --tl-bg-soft: #fdf4ff;
    --tl-border: rgba(217, 70, 239, 0.35);
}

.timeline-row.tp-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.timeline-box {
    flex: 0 0 43%;
    z-index: 2;
    background: #ffffff;
    padding: 22px 26px;
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(0, 44, 119, 0.06);
    border: 1.5px solid #e2e8f0;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.timeline-row:hover .timeline-box {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px var(--tl-glow, rgba(0, 168, 236, 0.16));
    border-color: var(--tl-primary, #00a8ec);
}

.timeline-row.left .timeline-box {
    order: -1;
    text-align: left;
}

.timeline-row.right .timeline-box {
    order: 1;
    text-align: left;
}

.timeline-title-btn {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: left;
    width: 100%;
}

.timeline-title-badge {
    display: inline-block;
}

.timeline-title-badge b {
    display: inline-block;
    background: var(--tl-grad, linear-gradient(135deg, #00a8ec 0%, #0066cc 100%));
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 0;
    box-shadow: 0 3px 10px var(--tl-glow, rgba(0, 168, 236, 0.28));
    line-height: 1.45;
}

.timeline-toggle-icon {
    display: none;
}

.timeline-desc {
    display: block;
}

.timeline-desc p {
    margin: 0;
    line-height: 1.6;
    color: #334155;
    font-size: 14.5px;
}

/* Timeline Media Wrapper & Animated Arrows */
.timeline-media-wrap {
    flex: 0 0 43%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 18px;
}

.timeline-row.left .timeline-media-wrap {
    order: 1;
    justify-content: flex-start;
}

.timeline-row.right .timeline-media-wrap {
    order: -1;
    justify-content: flex-end;
}

.timeline-arrow-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    transform: scale(0.65) translateY(12px);
    transition: opacity 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
}

.timeline-row.tp-in-view .timeline-arrow-indicator,
.timeline-row.tl-reached .timeline-arrow-indicator {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.timeline-arrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--tl-primary, #0079ab);
    background: var(--tl-bg-soft, rgba(0, 168, 236, 0.12));
    border: 1px solid var(--tl-border, rgba(0, 168, 236, 0.3));
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--tl-glow, rgba(0, 168, 236, 0.12));
}

.timeline-arrow-tag i {
    color: var(--tl-primary, #00a8ec);
    font-size: 10px;
}

.timeline-curved-arrow {
    width: 82px;
    height: 38px;
    overflow: visible;
    color: var(--tl-primary, #00a8ec);
    filter: drop-shadow(0 2px 6px var(--tl-glow, rgba(0, 168, 236, 0.35)));
}

.timeline-curved-arrow .arrow-line {
    stroke: var(--tl-primary, #00a8ec);
    stroke-dasharray: 6 3;
    animation: tlArrowDash 1.2s linear infinite;
}

.timeline-curved-arrow .arrow-tip {
    stroke: var(--tl-primary, #00a8ec);
    fill: none;
}

@keyframes tlArrowDash {
    to {
        stroke-dashoffset: -18;
    }
}

.timeline-arrow-indicator.arrow-to-right {
    animation: arrowNudgeRight 2.2s ease-in-out infinite;
}

.timeline-arrow-indicator.arrow-to-left {
    animation: arrowNudgeLeft 2.2s ease-in-out infinite;
}

@keyframes arrowNudgeRight {

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

    50% {
        transform: translateX(7px);
    }
}

@keyframes arrowNudgeLeft {

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

    50% {
        transform: translateX(-7px);
    }
}

/* Timeline image */
.timeline-img {
    height: auto !important;
    max-height: 230px !important;
    max-width: 290px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    background: #f8fafc !important;
    flex-shrink: 1;
}

.timeline-img:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 14px 30px var(--tl-glow, rgba(0, 0, 0, 0.14)) !important;
}

/* Center Year Badge */
.timeline-year,
.timeline-year1,
.timeline-year2 {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    text-align: center !important;
    z-index: 10 !important;
    margin: 0 !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.timeline-row.tl-reached .timeline-year,
.timeline-row.tl-reached .timeline-year1,
.timeline-row.tl-reached .timeline-year2 {
    background: var(--tl-grad, linear-gradient(135deg, #00a8ec 0%, #0066cc 100%)) !important;
    color: #ffffff !important;
    border-color: var(--tl-primary, #00a8ec) !important;
    box-shadow: 0 0 0 5px var(--tl-glow, rgba(0, 168, 236, 0.22)), 0 8px 24px var(--tl-glow, rgba(0, 168, 236, 0.45)) !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Glowing head riding the tip of the line (Behind the Year Badge) */
.timeline-head {
    position: absolute;
    left: 50%;
    top: var(--line-progress, 0%);
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffffff;
    border: 3.5px solid #00a8ec;
    box-shadow: 0 0 0 6px rgba(0, 168, 236, 0.25), 0 0 20px rgba(0, 168, 236, 0.9);
    z-index: 2;
    pointer-events: none;
    transition: top 0.08s linear;
    animation: tlHeadPulse 2s ease-in-out infinite alternate;
}

@keyframes tlHeadPulse {
    0% {
        box-shadow: 0 0 0 5px rgba(0, 168, 236, 0.2), 0 0 14px rgba(0, 168, 236, 0.7);
    }

    100% {
        box-shadow: 0 0 0 10px rgba(0, 168, 236, 0.06), 0 0 26px rgba(0, 168, 236, 0.95);
    }
}

.timeline-row.tl-reached .timeline-box {
    border-color: var(--tl-border, rgba(0, 168, 236, 0.4));
    box-shadow: 0 10px 28px var(--tl-glow, rgba(0, 168, 236, 0.12));
}

.timeline-row.tl-reached .timeline-img {
    box-shadow: 0 12px 28px var(--tl-glow, rgba(0, 168, 236, 0.16)) !important;
}

@media (max-width: 768px) {

    .timeline::before,
    .timeline::after {
        left: 20px !important;
        transform: none !important;
    }

    .timeline-head {
        left: 20px !important;
        transform: translate(-50%, -50%) !important;
    }

    .timeline-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: 20px 0 !important;
        padding-left: 54px !important;
        position: relative !important;
    }

    .timeline-box {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding: 10px 12px !important;
        cursor: pointer;
        border-radius: 14px !important;
        box-shadow: 0 3px 14px rgba(0, 44, 119, 0.05) !important;
        border: 1.5px solid #e2e8f0 !important;
        transition: all 0.25s ease !important;
        background: #ffffff !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .timeline-box:hover,
    .timeline-box:active {
        border-color: var(--tl-primary, #00a8ec) !important;
        box-shadow: 0 4px 18px var(--tl-glow, rgba(0, 168, 236, 0.18)) !important;
    }

    .timeline-box:active {
        transform: scale(0.985) !important;
    }

    .timeline-box.is-expanded {
        padding: 12px 14px 16px !important;
        border-color: var(--tl-primary, #00a8ec) !important;
        background: var(--tl-bg-soft, #f8fdff) !important;
        box-shadow: 0 8px 24px var(--tl-glow, rgba(0, 168, 236, 0.18)) !important;
    }

    .timeline-title-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 0 !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        width: 100% !important;
    }

    .timeline-title-badge {
        flex: 1 1 auto;
        min-width: 0;
    }

    .timeline-title-badge b {
        display: block !important;
        font-size: 13.5px !important;
        padding: 8px 12px !important;
        line-height: 1.4 !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 2px 8px var(--tl-glow, rgba(0, 102, 204, 0.25)) !important;
    }

    /* Eye-catching dropdown button with pulse and nudge animation */
    .timeline-toggle-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 50% !important;
        background: var(--tl-bg-soft, #e0f2fe) !important;
        border: 1.5px solid var(--tl-border, rgba(0, 168, 236, 0.35)) !important;
        color: var(--tl-primary, #0079ab) !important;
        font-size: 13.5px !important;
        box-shadow: 0 2px 8px var(--tl-glow, rgba(0, 168, 236, 0.2)) !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
        animation: tlDropdownPulse 2.2s ease-in-out infinite !important;
    }

    .timeline-row:not(.is-expanded) .timeline-toggle-icon i {
        display: inline-block;
        animation: tlChevronNudge 1.5s ease-in-out infinite;
    }

    @keyframes tlDropdownPulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 var(--tl-glow, rgba(0, 168, 236, 0.45)), 0 2px 8px var(--tl-glow, rgba(0, 168, 236, 0.2));
            transform: translateY(0) scale(1);
        }

        50% {
            box-shadow: 0 0 0 7px rgba(0, 0, 0, 0), 0 4px 14px var(--tl-glow, rgba(0, 168, 236, 0.35));
            transform: translateY(-2px) scale(1.07);
        }
    }

    @keyframes tlChevronNudge {

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

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

    .timeline-box.is-expanded .timeline-toggle-icon {
        transform: rotate(180deg) scale(1) !important;
        background: var(--tl-grad, linear-gradient(135deg, #00a8ec 0%, #0066cc 100%)) !important;
        border-color: var(--tl-primary, #00a8ec) !important;
        color: #ffffff !important;
        box-shadow: 0 3px 10px var(--tl-glow, rgba(0, 168, 236, 0.35)) !important;
        animation: none !important;
    }

    .timeline-box.is-expanded .timeline-toggle-icon i {
        animation: none !important;
    }

    .timeline-desc {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin-top: 0 !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease, visibility 0.4s !important;
    }

    .timeline-box.is-expanded .timeline-desc {
        max-height: 800px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px dashed var(--tl-border, #cbd5e1) !important;
    }

    .timeline-desc p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        color: #334155 !important;
        margin: 0 !important;
    }

    /* Images visible by default on mobile under each milestone card */
    .timeline-media-wrap {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        margin-top: 10px !important;
    }

    .timeline-arrow-indicator {
        display: none !important;
    }

    .timeline-img {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 200px !important;
        height: auto !important;
        margin-top: 0 !important;
        object-fit: contain !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        padding: 6px !important;
        border: 1.5px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    }

    .timeline-row:hover .timeline-img,
    .timeline-row.is-expanded .timeline-img {
        border-color: var(--tl-border, #cbd5e1) !important;
        box-shadow: 0 6px 20px var(--tl-glow, rgba(0, 0, 0, 0.12)) !important;
    }

    /* Center year badge vertically aligned with the title card */
    .timeline-year,
    .timeline-year1,
    .timeline-year2 {
        left: 20px !important;
        top: 27px !important;
        transform: translate(-50%, -50%) !important;
        font-size: 12.5px !important;
        padding: 4px 12px !important;
    }

    .timeline-row.tl-reached .timeline-year,
    .timeline-row.tl-reached .timeline-year1,
    .timeline-row.tl-reached .timeline-year2 {
        transform: translate(-50%, -50%) scale(1.1) !important;
    }
}

.timeline-card-img {
    width: 110px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.timeline-card-desc {
    font-size: 13.5px;
    line-height: 1.58;
    color: #475569;
    margin: 0;
}

@media (max-width: 768px) {
    .timeline {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .timeline-card-body {
        flex-direction: column;
    }

    .timeline-card-img {
        width: 100%;
        height: 160px;
    }
}

/* ============================================ */
/* SECTION 27: Student & Parent Testimonials   */
/* ============================================ */
.testimonials-bubble-section {
    padding: 28px 0 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 35%, #fafafa 100%);
    overflow: hidden;
    position: relative;
}

.testimonials-main-title {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #111827;
    margin-bottom: 8px;
}

.testimonials-main-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 24px;
}

.tst-badge {
    background: rgba(0, 168, 236, 0.1) !important;
    border-color: rgba(0, 168, 236, 0.28) !important;
    color: #0079ab !important;
}

/* Two rows travelling in opposite directions, faded at both edges */
.tst-marquee-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

#bubbleMarqueeRoot {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tst-row {
    width: 100%;
    overflow: hidden;
    padding: 6px 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.tst-row.is-dragging {
    cursor: grabbing;
}

.tst-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
    touch-action: pan-y;
}

/* Compact Review card */
.tst-card {
    position: relative;
    flex: 0 0 auto;
    width: 300px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8eef5;
    border-radius: 14px;
    padding: 13px 15px 11px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Accent bar that wipes in on hover */
.tst-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00a8ec, #0052cc);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.tst-card:hover {
    transform: translateY(-4px);
    border-color: #cfe8f8;
    box-shadow: 0 10px 24px rgba(0, 168, 236, 0.12);
}

.tst-card:hover::before {
    transform: scaleX(1);
}

.tst-quote {
    position: absolute;
    top: 9px;
    right: 12px;
    font-size: 22px;
    color: rgba(0, 168, 236, 0.08);
    pointer-events: none;
}

.tst-stars {
    display: flex;
    gap: 2.5px;
    margin-bottom: 5px;
    color: #fbbf24;
    font-size: 11px;
}

.tst-text {
    position: relative;
    z-index: 1;
    color: #334155;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0 0 8px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tst-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.tst-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    padding: 1.5px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 168, 236, 0.35);
}

.tst-meta {
    min-width: 0;
    flex: 1;
}

.tst-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tst-role {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Source platform chip */
.tst-source {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e8eef5;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tst-source svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tst-card:hover .tst-source {
    transform: scale(1.08);
}

/* Faint brand tint so each platform still reads at a glance */
.src-facebook {
    background: #f2f7ff;
    border-color: #d9e8fd;
}

.src-whatsapp {
    background: #f2fdf5;
    border-color: #d5f2de;
}

.src-google {
    background: #fff5f4;
    border-color: #fbdcd9;
}

.src-default {
    background: #f8fafc;
    border-color: #e8eef5;
}

/* Sprite holder must never take up space */
.tst-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Full Review Modal */
.tst-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tst-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.tst-modal-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    padding: 26px 26px 22px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tst-modal-overlay.is-active .tst-modal-card {
    transform: translateY(0) scale(1);
}

.tst-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tst-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.tst-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    padding-right: 32px;
    border-bottom: 1px solid #f1f5f9;
}

.tst-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00a8ec;
    padding: 2px;
    background: #ffffff;
    flex-shrink: 0;
}

.tst-modal-meta {
    flex: 1;
    min-width: 0;
}

.tst-modal-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
}

.tst-modal-role {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

.tst-modal-body {
    position: relative;
    padding-top: 10px;
}

.tst-modal-quote {
    font-size: 20px;
    color: #00a8ec;
    opacity: 0.35;
    margin-bottom: 8px;
    display: block;
}

.tst-modal-text {
    font-size: 14px;
    line-height: 1.68;
    color: #334155;
    margin: 0;
}

@media (max-width: 575px) {
    .tst-card {
        width: 260px;
        padding: 11px 13px 10px;
    }

    .tst-modal-card {
        padding: 20px 18px 18px;
    }
}

/* ============================================ */
/* SECTION 28: Best App Builder Award & Logos   */
/* ============================================ */
.best-app-builder-section {
    position: relative;
    overflow: hidden;
    /* padding: 84px 0 76px; */
    /* Starts on the testimonials grey (#fafafa) and lands on the footer white (#ffffff),
       so both edges dissolve instead of showing a seam */
    background: linear-gradient(180deg,
            #fafafa 0%,
            #f5fafd 16%,
            #ecf6fd 42%,
            #eef7fd 60%,
            #f7fbfe 82%,
            #ffffff 100%);
}

/* Soft glow behind the heading — kept fully inside the section so it never clips at an edge */
.best-app-builder-section::before {
    content: "";
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    max-width: 120%;
    height: 380px;
    background: radial-gradient(ellipse at center, rgba(0, 168, 236, 0.14) 0%, rgba(0, 168, 236, 0.05) 45%, rgba(0, 168, 236, 0) 72%);
    pointer-events: none;
}

.best-app-builder-section .website-heading-wrapper {
    position: relative;
    z-index: 1;
    margin: 30px auto !important;
}

.best-app-builder-section .website-heading-wrapper h2 {
    letter-spacing: -0.4px;
}

.best-app-builder-section .website-heading-wrapper h2 span {
    position: relative;
    display: inline-block;
}

.best-app-builder-section .website-heading-wrapper p {
    max-width: 900px;
    font-size: 16.5px;
    line-height: 1.8;
}

.bab-badge {
    background: rgba(255, 193, 7, 0.14) !important;
    color: #b47b00 !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
}

.bab-badge i {
    color: #f5a623;
}

.bab-trust-label {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 22px;
}

.bab-trust-label i {
    color: #00a8ec;
    margin-right: 6px;
}

.best-app-title {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.best-app-description {
    font-size: 17.5px;
    font-weight: 500;
    color: #374151;
    line-height: 1.75;
    max-width: 1000px;
    margin: 0 auto 35px;
}

/* ============================================ */
/* SECTION 4: Client Logos Interactive Slider   */
/* ============================================ */
.section-client-logos {
    padding: 0 0 10px 0;
}

.client-scroll-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.client-scroll-row1 {
    padding: 4px 0 6px 0;
}

.client-scroll-row2 {
    padding: 6px 0 16px 0;
}

.client-scroll-wrapper.is-dragging {
    cursor: grabbing;
}

.client-scroll-wrapper.is-dragging .client-logo-img:hover {
    transform: none;
}

.client-scroll-track {
    display: flex;
    gap: 20px;
    width: max-content;
    align-items: center;
}

.client-logo-img {
    height: 72px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    padding: 2px 6px;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.client-logo-img:hover {
    transform: translateY(-4px) scale(1.06);
}

@media (max-width: 767px) {
    .client-scroll-wrapper {
        padding: 4px 0;
    }

    .client-scroll-row1 {
        padding: 2px 0 4px 0;
    }

    .client-scroll-row2 {
        padding: 4px 0 12px 0;
    }

    .client-scroll-track {
        gap: 14px;
    }

    .client-logo-img {
        height: 48px;
        max-width: 130px;
        padding: 2px 4px;
    }
}

#awardLogoSlider {
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 18px 0;
    /* Fade the strip out at both edges instead of cutting it off */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    /* Drag to scroll: horizontal gestures belong to the slider, vertical ones to the page */
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

#awardLogoSlider.is-dragging {
    cursor: grabbing;
}

#awardLogoSlider.is-dragging .award-logo:hover {
    transform: none;
    border-color: #e6eef5;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

#awardLogoTrack {
    display: flex;
    gap: 22px;
    width: max-content;
    align-items: center;
}

.award-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    padding: 14px 22px;
    background: #ffffff;
    border: 1px solid #e6eef5;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    box-sizing: content-box;
    /* Logos always stay in full colour */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.award-logo:hover {
    transform: translateY(-4px) scale(1.04);
    border-color: #00a8ec;
    box-shadow: 0 12px 26px rgba(0, 168, 236, 0.18);
}

@media (max-width: 767px) {
    /* .best-app-builder-section {
        padding: 52px 0 46px;
    } */

    .best-app-builder-section .website-heading-wrapper p {
        font-size: 15px;
        line-height: 1.7;
    }

    #awardLogoTrack {
        gap: 14px;
    }

    .award-logo {
        height: 44px;
        padding: 10px 16px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .award-logo {
        transition: none;
    }
}

/* ============================================ */
/* SECTION 29: Modern Main Footer (White Theme) */
/* ============================================ */
/* ============================================ */
/* SECTION 29: Modern Main Footer (Dark Theme)  */
/* ============================================ */
/* ============================================ */
/* SECTION 29: Modern Main Footer (Light Theme) */
/* ============================================ */
.main-footer-section {
    background: #ffffff;
    color: #475569;
    padding: 20px 0 30px;
    font-family: 'Inter', sans-serif;
    position: relative;
    /* No border here — the section above fades into white on its own */
}

/* Top CTA Banner */
.footer-cta-card {
    background: linear-gradient(135deg, #00a8ec 0%, #0052cc 100%);
    border-radius: 18px;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    box-shadow: 0 10px 24px rgba(0, 168, 236, 0.2);
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.footer-cta-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.cta-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-cta-left h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Bricolage Grotesque', 'Poppins', sans-serif;
    max-width: 620px;
    margin: 0;
    line-height: 1.25;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #0052cc !important;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.footer-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    background: #f8fafc;
}

/* Footer Main Grid (4 Balanced Columns) */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.05fr 1.05fr 1.9fr;
    gap: 32px;
    padding-bottom: 42px;
    border-bottom: 1px solid #e2e8f0;
}

.footer-brand-col .footer-logo {
    height: 42px;
    width: auto;
    margin-bottom: 18px;
}

.footer-brand-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 22px;
}

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

.footer-social-icons a {
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.footer-social-icons a:hover {
    background: #00a8ec;
    color: #ffffff !important;
    border-color: #00a8ec;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 168, 236, 0.35);
}

.footer-group-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
    position: relative;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-list a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}

.footer-link-list a:hover {
    color: #00a8ec;
    transform: translateX(4px);
}

.footer-location-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.footer-flag-img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-block;
    vertical-align: middle;
}

.location-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.footer-address-text {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 16px;
    white-space: nowrap;
}

.footer-map-link {
    color: #64748b;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-map-link:hover {
    color: #00a8ec;
}

.footer-direct-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00a8ec;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-contact-link:hover {
    opacity: 0.85;
    transform: translateX(2px);
}

/* Footer Bottom Row */
.footer-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 25px;
}

.copyright-text {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0;
    text-align: center;
}

/* Responsive Footer Grid */
@media (max-width: 1200px) {
    .footer-main-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1.8fr;
        gap: 24px;
    }
}

@media (max-width: 991px) {
    .footer-cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }

    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 24px;
    }

    .footer-brand-col {
        grid-column: span 2;
    }

    .footer-contact-col {
        grid-column: span 2;
    }

    .footer-address-text {
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
        padding-bottom: 28px;
    }

    .footer-brand-col {
        grid-column: span 2;
    }

    .footer-solutions-col {
        grid-column: span 1;
    }

    .footer-company-col {
        grid-column: span 1;
    }

    .footer-contact-col {
        grid-column: span 2;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 16px 18px;
    }

    .footer-address-text {
        font-size: 0.85rem;
        white-space: normal;
    }

    .footer-group-title {
        font-size: 0.96rem;
        margin-bottom: 14px;
    }

    .footer-link-list {
        gap: 10px;
    }

    .footer-link-list a {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding-top: 20px;
    }
}

/* ============================================ */
/* SECTION 30: AI Chatbot Floating Widget CSS   */
/* ============================================ */
.chat-toggle {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    border: 3px solid #2563eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.3);
}

.chat-toggle img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.chat-toggle-text {
    font-size: 13.5px;
    color: #1e293b;
    line-height: 1.3;
}

.chatbox {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 360px;
    height: 530px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10000;
}

.chatbox.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.chatbox-header {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.chatbox-header .close-btn {
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.chatbox-header .close-btn:hover {
    opacity: 1;
}

#chatMessages {
    flex: 1;
    background: #f8fafc;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    max-width: 85%;
    padding: 11px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.message.bot {
    background: #ffffff;
    color: #1e293b;
    align-self: flex-start;
    border: 1px solid #e2e8f0;
    border-top-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.message.user {
    background: #2563eb;
    color: #ffffff;
    align-self: flex-end;
    border-top-right-radius: 4px;
}

.chat-option {
    border: 1px solid #2563eb;
    background: #ffffff;
    color: #2563eb;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.chat-option:hover {
    background: #2563eb;
    color: #ffffff;
}

.chatbox-footer {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.input-area {
    display: flex;
    gap: 8px;
}

.input-area input {
    flex: 1;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 13.5px;
    outline: none;
}

.input-area input:focus {
    border-color: #2563eb;
    background: #ffffff;
}

.input-area button {
    width: 42px;
    height: 42px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

.input-area button:hover {
    background: #1d4ed8;
}

/* ============================================ */
/* Floating Side Contact Buttons (Bottom Left)  */
/* ============================================ */
.floating-contact-stack {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.floating-contact-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    font-size: 26px;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, filter 0.2s ease;
    outline: none;
}

/* Phone Call Button - Blue Theme */
.floating-contact-btn.call {
    background: linear-gradient(135deg, #00a8ec 0%, #0066cc 100%);
    box-shadow: 0 6px 20px rgba(0, 168, 236, 0.4);
}

/* WhatsApp Button */
.floating-contact-btn.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
}

/* Hover & Active Effects */
.floating-contact-btn:hover {
    transform: scale(1.14) translateY(-2px);
}

.floating-contact-btn.call:hover {
    box-shadow: 0 10px 28px rgba(0, 168, 236, 0.6);
}

.floating-contact-btn.whatsapp:hover {
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
}

.floating-contact-btn:active {
    transform: scale(0.96);
}

.floating-contact-btn i {
    font-size: 22px;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Side Tooltip */
.floating-contact-btn::after {
    content: attr(title);
    position: absolute;
    left: 66px;
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
}

.floating-contact-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .floating-contact-stack {
        bottom: 16px;
        left: 16px;
        gap: 10px;
    }

    .floating-contact-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .floating-contact-btn i {
        font-size: 20px;
    }

    .floating-contact-btn::after {
        display: none;
    }
}

/* ============================================ */
/* Contact Us Scroll Popup Modal CSS            */
/* ============================================ */
.contact-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.contact-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.contact-popup-card {
    position: relative;
    background: #ffffff;
    border-radius: 28px;
    padding: 32px 30px;
    max-width: 860px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.contact-popup-overlay.active .contact-popup-card {
    transform: scale(1) translateY(0);
}

.contact-popup-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.contact-popup-close:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: rotate(90deg);
}

.contact-popup-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: center;
    text-align: left;
}

/* Left Video Column */
.contact-popup-video-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 20px 18px;
}

.popup-video-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220, 0, 67, 0.1);
    color: #dc0043;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    letter-spacing: 0.5px;
}

.popup-video-heading {
    font-size: 16.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.35;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.popup-video-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0b1c3f;
    box-shadow: 0 8px 24px rgba(11, 28, 63, 0.14);
}

.popup-video-wrap .youtube-facade {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-video-wrap .youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.popup-video-wrap .youtube-facade:hover img {
    transform: scale(1.04);
}

.popup-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.popup-video-features {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
}

.pv-feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 5px 6px;
    border-radius: 20px;
    white-space: nowrap;
    text-align: center;
}

.pv-feature i {
    color: #0066ff;
    font-size: 10.5px;
    flex-shrink: 0;
}

.pv-feature span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right Form Column */
.contact-popup-form-col {
    display: flex;
    flex-direction: column;
}

.contact-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 168, 236, 0.1);
    color: #00a8ec;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.contact-popup-header h3 {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.25;
}

.contact-popup-header p {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 18px;
}

.contact-popup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    margin-bottom: 4px;
}

.popup-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.popup-input-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.popup-input-group label i {
    color: #0066ff;
}

.popup-input-group input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    font-size: 13.5px;
    color: #0f172a;
    background: #f8fafc;
    transition: all 0.25s ease;
    outline: none;
}

.popup-input-group input:focus {
    border-color: #25D366;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}

.popup-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.contact-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: none;
    cursor: pointer;
    width: 100%;
}

.contact-popup-btn span,
.contact-popup-btn i {
    color: #ffffff !important;
}

.contact-popup-btn.call {
    background: linear-gradient(135deg, #00a8ec 0%, #0066cc 100%);
    box-shadow: 0 6px 18px rgba(0, 168, 236, 0.35);
}

.contact-popup-btn.call:hover {
    box-shadow: 0 10px 24px rgba(0, 168, 236, 0.5);
    transform: translateY(-2px);
}

.contact-popup-btn.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
}

.contact-popup-btn.whatsapp:hover {
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
    transform: translateY(-2px);
}

@media (max-width: 860px) {
    .contact-popup-card {
        padding: 24px 18px;
        max-width: 480px;
    }

    .contact-popup-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-popup-video-col {
        padding: 14px;
        order: 1;
    }

    .contact-popup-form-col {
        order: 2;
    }
}

@media (max-width: 440px) {
    .contact-popup-card {
        padding: 20px 14px;
    }

    .popup-video-features {
        gap: 4px;
    }

    .pv-feature {
        font-size: 10px;
        padding: 4px 4px;
        gap: 4px;
    }

    .pv-feature i {
        font-size: 9.5px;
    }
}

/* ============================================ */
/* SECTION 15: Package Tier Pricing Cards       */
/* ============================================ */
/* ============================================ */
/* SECTION 15: Package Tier Pricing Cards       */
/* ============================================ */
.pricing-plans-section {
    position: relative;
    background: linear-gradient(180deg, #f8faff 0%, #edf4fe 100%) !important;
    padding-bottom: 8px !important;
}

.pricing-main-title {
    font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
    font-weight: 900 !important;
    color: #0b1c3f !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
}

.pricing-main-title .pricing-title-blue,
.pricing-main-title span.pricing-title-blue {
    color: #00A8EC !important;
}

/* Split Showcase Container */
.pricing-split-wrapper {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 32px;
    box-shadow: 0 16px 45px rgba(11, 28, 63, 0.05);
    overflow: hidden;
    margin-bottom: 28px;
    position: relative;
}

.pricing-split-left {
    flex: 1 1 50%;
    padding: 44px 44px 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
}

.pricing-split-left .popular-ribbon {
    position: absolute;
    top: 24px;
    left: 44px;
    transform: none;
    background: #0066ff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pricing-split-left .plan-badge-popular {
    display: inline-block;
    background: #eef5ff;
    color: #0066ff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 50px;
    margin-top: 28px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.pricing-split-left .plan-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0b1c3f;
    margin-bottom: 8px;
}

.pricing-split-left .plan-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 10px;
    min-height: auto;
}

.plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.plan-price-row .currency {
    font-size: 22px;
    font-weight: 800;
    color: #0066ff;
}

.plan-price-row .amount {
    font-size: clamp(3.4rem, 5.5vw, 4.4rem);
    font-weight: 900;
    color: #0b1c3f;
    line-height: 1;
    font-family: 'Bricolage Grotesque', sans-serif;
    letter-spacing: -0.03em;
    display: inline-block;
    transform-origin: left center;
    animation: priceBlinkPulse 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}

.plan-price-row .period {
    font-size: 15px;
    color: #64748b;
    font-weight: 600;
    margin-left: 4px;
}

@keyframes priceBlinkPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        color: #0b1c3f;
        text-shadow: none;
    }

    50% {
        opacity: 0.35;
        transform: scale(1.04);
        color: #0066ff;
        text-shadow: 0 4px 22px rgba(0, 102, 255, 0.45);
    }
}

/* Savings Pills (Actual Value & You Save) */
.plan-savings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.savings-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
}

.savings-pill-value {
    background: #f4f6f8;
    color: #64748b;
}

.savings-pill-value i {
    font-size: 20px;
    color: #475569;
}

.savings-pill-save {
    background: #eefbf1;
    color: #16a34a;
}

.savings-pill-save i {
    font-size: 20px;
    color: #16a34a;
}

.savings-pill .pill-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.savings-pill .pill-value {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.savings-pill .pill-value.strike {
    color: #e2212b;
    text-decoration: line-through;
}

.savings-pill .pill-value.highlight {
    color: #16a34a;
}

/* 2-Column Check Features List */
.pricing-feature-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.pricing-feature-grid li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.35;
}

.pricing-feature-grid li i {
    color: #0066ff;
    font-size: 16px;
    flex: none;
}

.btn-pricing-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    background: #0066ff;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-pricing-primary:hover {
    background: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 102, 255, 0.4);
}

/* Right: Product Showcase Image Side (Full Size Edge-to-Edge) */
.pricing-split-right {
    flex: 1 1 50%;
    background: #f0f4fb;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.pricing-bundle-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}

.pricing-bundle-carousel .carousel-inner {
    width: 100%;
    height: 100%;
}

.pricing-bundle-carousel .carousel-item {
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.pricing-showcase-img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.5s ease;
}

.pricing-split-wrapper:hover .pricing-showcase-img {
    transform: scale(1.02);
}

/* Fast Carousel Indicators & Controls */
.pricing-bundle-carousel .carousel-indicators {
    margin-bottom: 16px;
    z-index: 3;
}

.pricing-bundle-carousel .carousel-indicators [data-bs-target] {
    width: 24px;
    height: 6px;
    border-radius: 4px;
    background-color: #ffffff;
    opacity: 0.65;
    border: none;
    margin: 0 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}

.pricing-bundle-carousel .carousel-indicators .active {
    opacity: 1;
    width: 36px;
    background-color: #0066ff;
}

.pricing-bundle-carousel .carousel-control-prev,
.pricing-bundle-carousel .carousel-control-next {
    width: 42px;
    height: 42px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    margin: 0 14px;
    opacity: 0;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.pricing-split-right:hover .carousel-control-prev,
.pricing-split-right:hover .carousel-control-next {
    opacity: 1;
}

.pricing-bundle-carousel .carousel-control-prev-icon,
.pricing-bundle-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
    width: 16px;
    height: 16px;
}

.pricing-bundle-carousel .carousel-control-prev:hover,
.pricing-bundle-carousel .carousel-control-next:hover {
    background: #0066ff;
    opacity: 1;
}

.pricing-bundle-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.pricing-bundle-carousel .carousel-control-next:hover .carousel-control-next-icon {
    filter: none;
}

/* Payment & Registration Details Strip - Clean Compact Edition */
.offer-payment-strip {
    background: #ffffff;
    border: 1.5px solid #eef2f6;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(11, 28, 63, 0.04);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.ops-item {
    padding: 16px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-right: 1px solid #f1f5f9;
    transition: background 0.25s ease;
    text-align: left;
    align-items: center;
}

.ops-item:last-child {
    border-right: none;
}

.ops-item:hover {
    background: #f8fafc;
}

.ops-item-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    overflow: hidden;
}

.ops-brand-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.ops-icon-wa {
    background: #25D366;
    color: #ffffff;
    font-size: 22px;
}

.ops-icon-headset {
    background: #0066ff;
    color: #ffffff;
    font-size: 17px;
}

.ops-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ops-item-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0b1c3f;
    margin: 0 0 2px 0;
    line-height: 1.25;
}

.ops-item-sub {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
    margin-bottom: 2px;
}

.ops-item-bank-acc {
    font-size: 12px;
    color: #0b1c3f;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.ops-item-bank-acc strong {
    font-weight: 800;
    color: #002875;
    font-family: monospace, system-ui;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.ops-copy-btn-compact {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #0066ff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.ops-copy-btn-compact:hover {
    background: #0066ff;
    color: #ffffff;
    border-color: #0066ff;
}

.ops-copy-btn-compact.copied {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}

.ops-item-action-row {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-link-pay {
    color: #0066ff !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.ops-link-pay:hover {
    color: #0044cc !important;
    text-decoration: underline !important;
}

.ops-link-pay i {
    font-size: 11px;
}

.ops-link-wa {
    color: #15803d !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.ops-link-wa:hover {
    color: #0d5f2a !important;
    text-decoration: underline !important;
}

.ops-hotline-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
}

.ops-hl-row {
    color: #64748b;
}

.ops-hl-row a {
    color: #0066ff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.ops-hl-row a:hover {
    color: #0044cc !important;
    text-decoration: underline !important;
}

/* Custom Calculator Promo Card (Compact & Packed) */
.custom-calc-promo {
    margin-top: 18px !important;
    margin-bottom: 12px !important;
}

.custom-calc-card {
    background: #ffffff;
    border: 1.5px solid rgba(0, 168, 236, 0.16);
    border-radius: 20px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.custom-calc-content {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.custom-calc-content .calc-icon {
    font-size: 20px;
    color: #0077b6;
    background: rgba(0, 168, 236, 0.1);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.custom-calc-content h4 {
    font-size: 14.5px;
    font-weight: 800;
    color: #0b1c3f;
    margin-bottom: 2px;
}

.custom-calc-content p {
    font-size: 12.5px;
    line-height: 1.35;
    color: #64748b;
    margin: 0;
}

/* Open Custom Calculator Animated Button */
.btn-toggle-calc {
    position: relative;
    background: linear-gradient(135deg, #0099ff 0%, #0052cc 100%);
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 8px 22px rgba(0, 110, 255, 0.38);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: calcGlowPulse 2.4s ease-in-out infinite;
    overflow: hidden;
    white-space: nowrap;
}

/* Shimmer beam light sweep across button */
.btn-calc-shimmer {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: rotate(30deg);
    animation: calcShimmerSweep 3.5s infinite;
    pointer-events: none;
}

@keyframes calcShimmerSweep {

    0%,
    30% {
        left: -100%;
    }

    60%,
    100% {
        left: 200%;
    }
}

/* Pulsing outer glowing aura */
@keyframes calcGlowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.55), 0 8px 22px rgba(0, 110, 255, 0.38);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 153, 255, 0), 0 10px 26px rgba(0, 110, 255, 0.45);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 153, 255, 0), 0 8px 22px rgba(0, 110, 255, 0.38);
    }
}

.btn-toggle-calc:hover {
    background: linear-gradient(135deg, #00adff 0%, #003db3 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 110, 255, 0.5);
    animation-play-state: paused;
}

.btn-toggle-calc:active {
    transform: translateY(0) scale(0.98);
}

.btn-toggle-calc .icon-spin {
    font-size: 13px;
    transition: transform 0.4s ease;
    animation: spinGear 4s linear infinite;
}

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

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

.btn-toggle-calc:hover .icon-spin {
    animation-duration: 1.5s;
}

.btn-toggle-calc .icon-arrow {
    font-size: 11px;
    transition: transform 0.3s ease;
    animation: calcArrowBounce 1.8s ease-in-out infinite;
}

@keyframes calcArrowBounce {

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

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

/* Active open state */
.btn-toggle-calc.active {
    background: #0b1c3f;
    box-shadow: 0 6px 18px rgba(11, 28, 63, 0.25);
    animation: none;
}

.btn-toggle-calc.active .icon-arrow {
    animation: none;
    transform: rotate(180deg);
}

.btn-toggle-calc.active .icon-spin {
    animation: none;
}

/* Smooth Accordion Pop-Up Expansion Animation */
.custom-calc-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: top center;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-calc-wrapper>div {
    overflow: hidden;
}

.custom-calc-wrapper.collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    transform: translateY(-16px) scale(0.96);
    pointer-events: none;
}

@media (max-width: 1100px) {
    .pricing-split-wrapper {
        display: flex;
        flex-direction: column;
    }

    .pricing-split-left,
    .pricing-split-right {
        flex: none;
        width: 100%;
    }

    .pricing-split-right {
        order: -1;
        padding: 0;
        width: 100%;
        border-top: none;
        border-bottom: 1px solid rgba(0, 102, 255, 0.12);
    }

    .pricing-split-left {
        order: 1;
        padding: 32px 24px;
    }

    .pricing-bundle-carousel {
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 480px;
    }

    .pricing-bundle-carousel .carousel-item {
        height: 100%;
    }

    .pricing-showcase-img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        display: block;
    }

    .pricing-bundle-carousel .carousel-control-prev,
    .pricing-bundle-carousel .carousel-control-next {
        opacity: 0.85;
    }

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

    .ops-item:nth-child(2) {
        border-right: none;
    }

    .ops-item:nth-child(1),
    .ops-item:nth-child(2) {
        border-bottom: 1px solid #f1f5f9;
    }
}

@media (max-width: 768px) {
    .pricing-feature-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .plan-savings-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .custom-calc-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 16px 14px;
        gap: 12px;
    }

    .custom-calc-content {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .btn-toggle-calc {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
}

@media (max-width: 575px) {
    .offer-payment-strip {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .ops-item {
        border-right: none !important;
        border-bottom: 1px solid #f1f5f9;
        padding: 12px 14px;
        gap: 12px;
    }

    .ops-item:last-child {
        border-bottom: none;
    }
}

/* ============================================ */
/* SECTION 4: Our Mission Modern Card Box      */
/* ============================================ */
.mission-card-box {
    position: relative;
    border-radius: 24px;
    padding: 34px 30px 30px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(11, 28, 63, 0.04);
    overflow: hidden;
    margin: 10px 0;
}

.mission-glow-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

.mission-glow-orb-1 {
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 168, 236, 0.16) 0%, transparent 70%);
}

.mission-glow-orb-2 {
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
}

.mission-dots-top-left {
    position: absolute;
    top: 18px;
    left: 22px;
    width: 65px;
    height: 65px;
    background-image: radial-gradient(#00a8ec 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.5;
    pointer-events: none;
}

.mission-dots-bottom-right {
    position: absolute;
    bottom: 18px;
    right: 25px;
    width: 70px;
    height: 70px;
    background-image: radial-gradient(#0066ff 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.45;
    pointer-events: none;
}

.mission-header-wrapper {
    max-width: 800px;
    margin: 0 auto 20px auto;
    position: relative;
    z-index: 2;
}

.mission-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 102, 255, 0.08);
    color: #0066ff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 102, 255, 0.18);
}

.mission-title {
    font-size: clamp(1.65rem, 2.3vw, 2.15rem) !important;
    font-weight: 900 !important;
    color: #0b1c3f !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0 !important;
}

.mission-highlight {
    color: #0066ff !important;
    position: relative;
}

.mission-subtitle {
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    max-width: 620px;
    margin: 0 auto !important;
}

/* 3-Card Grid / Mobile Slider Showcase */
.mission-slider-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
    margin: 0 0 20px 0;
}

.mission-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    text-align: left;
    position: relative;
    z-index: 2;
}

.mission-slider-dots {
    display: none;
}

.mission-card-item {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 102, 255, 0.12);
    border-radius: 18px;
    padding: 18px 18px;
    box-shadow: 0 8px 24px rgba(11, 28, 63, 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

.mission-card-item:hover {
    background: #ffffff;
    transform: translateY(-5px);
    border-color: rgba(0, 102, 255, 0.35);
    box-shadow: 0 16px 36px rgba(0, 102, 255, 0.09);
}

.mission-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mission-card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.35s ease;
}

.mission-card-icon-wrap.icon-blue {
    background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.2);
}

.mission-card-icon-wrap.icon-cyan {
    background: linear-gradient(135deg, #e6f9ff 0%, #cffafe 100%);
    color: #008ebf;
    border: 1px solid rgba(0, 168, 236, 0.25);
}

.mission-card-icon-wrap.icon-emerald {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mission-card-item:hover .mission-card-icon-wrap {
    transform: scale(1.08) rotate(4deg);
}

.mission-card-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0b1c3f !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
}

.mission-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
}

.mission-pill-tag.tag-blue {
    background: #eef6ff;
    color: #0066ff;
    border: 1px solid rgba(0, 102, 255, 0.2);
}

.mission-pill-tag.tag-cyan {
    background: #e6f9ff;
    color: #008ebf;
    border: 1px solid rgba(0, 168, 236, 0.25);
}

.mission-pill-tag.tag-emerald {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mission-item-text {
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.mission-item-text b {
    color: #0f172a;
    font-weight: 700;
}

.mission-footer-action {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.btn-mission-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0080ff 0%, #0052cc 100%);
    color: #ffffff !important;
    padding: 10px 26px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.28);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-mission-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 102, 255, 0.4);
    color: #ffffff !important;
}

.btn-mission-cta i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

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

@media (min-width: 769px) {
    .mission-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        transform: none !important;
        width: 100% !important;
        gap: 16px !important;
    }

    .mission-slider-dots {
        display: none !important;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .mission-card-box {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .mission-cards-grid {
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    .mission-card-box {
        padding: 20px 14px 16px;
        border-radius: 18px;
        margin: 6px 0;
    }

    .mission-header-wrapper {
        margin-bottom: 14px;
    }

    .mission-badge-pill {
        font-size: 10px;
        padding: 3px 10px;
        margin-bottom: 6px;
    }

    .mission-title {
        font-size: 1.45rem !important;
        margin-bottom: 4px !important;
    }

    .mission-subtitle {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .mission-slider-wrapper {
        overflow: hidden;
        width: 100%;
        margin: 0 0 14px 0;
        position: relative;
    }

    .mission-cards-grid {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 4px 0 6px 0;
        transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }

    .mission-card-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 14px;
        border-radius: 16px;
        gap: 8px;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(11, 28, 63, 0.05);
    }

    .mission-card-item:hover {
        transform: none;
    }

    .mission-card-top-row {
        gap: 8px;
        margin-bottom: 2px;
    }

    .mission-card-icon-wrap {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 9px;
    }

    .mission-pill-tag {
        font-size: 10px;
        padding: 2px 8px;
    }

    .mission-card-heading {
        font-size: 15px !important;
    }

    .mission-item-text {
        font-size: 12px !important;
        line-height: 1.48 !important;
    }

    .mission-slider-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
    }

    .mission-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 102, 255, 0.2);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        border: none;
        padding: 0;
        outline: none;
    }

    .mission-dot.active {
        width: 22px;
        border-radius: 10px;
        background: #0066ff;
        box-shadow: 0 2px 6px rgba(0, 102, 255, 0.35);
    }

    .btn-mission-cta {
        padding: 9px 18px;
        font-size: 12.5px;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================ */
/* Back to Top Floating Button & Animations     */
/* ============================================ */
#backToTopBtn,
.floating-contact-btn.back-to-top-btn {
    position: fixed;
    top: 50%;
    left: 20px;
    right: auto;
    bottom: auto;
    z-index: 99995;
    background: linear-gradient(135deg, #00a8ec 0%, #0056b3 100%);
    box-shadow: 0 5px 18px rgba(0, 168, 236, 0.4);
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(0);
    width: 42px;
    height: 42px;
    max-height: 42px;
    font-size: 16px;
    margin-top: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.35s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}

#backToTopBtn.show,
.floating-contact-btn.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
    max-height: 42px;
    margin-top: 0;
}

#backToTopBtn:hover,
.floating-contact-btn.back-to-top-btn:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 24px rgba(0, 168, 236, 0.6);
    background: linear-gradient(135deg, #1ab5f4 0%, #0066cc 100%);
}

#backToTopBtn:hover i,
.floating-contact-btn.back-to-top-btn:hover i {
    animation: topBtnArrowBounce 0.6s infinite alternate ease-in-out;
}

#backToTopBtn:active,
.floating-contact-btn.back-to-top-btn:active {
    transform: translateY(-50%) scale(0.96);
}

#backToTopBtn::after,
.floating-contact-btn.back-to-top-btn::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(-6px);
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
}

#backToTopBtn:hover::after,
.floating-contact-btn.back-to-top-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.scroll-progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 1;
}

.scroll-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 3;
}

.scroll-progress-bar {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset 0.1s linear;
}

.floating-contact-btn.back-to-top-btn.is-scrolling {
    animation: backToTopPulse 0.4s ease-in-out;
}

@keyframes backToTopPulse {
    0% {
        box-shadow: 0 6px 20px rgba(0, 168, 236, 0.4);
    }

    50% {
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 8px 26px rgba(0, 168, 236, 0.7);
    }

    100% {
        box-shadow: 0 6px 20px rgba(0, 168, 236, 0.4);
    }
}

@media (max-width: 768px) {
    #backToTopBtn,
    .floating-contact-btn.back-to-top-btn {
        left: 10px;
        right: auto;
        top: 50%;
        bottom: auto;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    #backToTopBtn.show,
    .floating-contact-btn.back-to-top-btn.show {
        max-height: 36px;
        transform: translateY(-50%) scale(1);
    }

    .scroll-progress-circle {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ============================================ */
/* SECTION 11: Smart POS Device Image Modal     */
/* ============================================ */
.pos-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pos-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 28, 63, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: posFadeIn 0.2s ease;
    cursor: pointer;
}

.pos-modal-content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: posZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pos-modal-img {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.5));
}

.pos-modal-close {
    position: absolute;
    top: -45px;
    right: -10px;
    font-size: 42px;
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    user-select: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.pos-modal-close:hover {
    color: #ff4d4d;
    transform: scale(1.15);
}

@keyframes posFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes posZoomIn {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .pos-modal-img {
        max-width: 92vw;
        max-height: 75vh;
    }

    .pos-modal-close {
        top: -40px;
        right: 0;
        font-size: 36px;
    }
}

/* ======================================================= */
/* ZERO-LAG & GPU HARDWARE ACCELERATION ENHANCERS          */
/* ======================================================= */
/* GPU hardware acceleration for smooth 60fps marquee tracks */
.client-logo-track,
.clients-track,
.award-track,
.cv-track,
.ts-track,
.rise-team-track-inner {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Optimize smooth scrolling across all devices */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Team avatar dimensions fallback */
.team-avatar-circle,
.rise-team-avatar-strip img {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

@media (max-width: 768px) {

    .team-avatar-circle,
    .rise-team-avatar-strip img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
}

/* ============================================ */
/* SECTION 12: Why Institutions Choose CFMS     */
/* ============================================ */
.inst-hero-section {
    position: relative;
    background: #edf3fb;
    background: linear-gradient(135deg, #f2f7fd 0%, #edf3fb 45%, #e3eefa 100%);
    overflow: hidden;
    padding-top: 60px;
    margin-bottom: 30px;
    border-top: 1px solid rgba(0, 102, 255, 0.06);
    border-bottom: 1px solid rgba(0, 102, 255, 0.08);
}

.inst-hero-decor-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Dot Matrices */
.inst-dot-matrix {
    position: absolute;
    background-image: radial-gradient(#9db4d4 1.8px, transparent 1.8px);
    background-size: 16px 16px;
    opacity: 0.65;
}

.inst-dot-matrix-left {
    top: 25px;
    left: 45px;
    width: 130px;
    height: 80px;
}

.inst-dot-matrix-right {
    top: 30px;
    right: 180px;
    width: 145px;
    height: 100px;
}

/* Orbital Rings */
.inst-orbital-ring {
    position: absolute;
    top: -50px;
    right: 40px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(0, 102, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.inst-orbital-ring-inner {
    position: absolute;
    top: -10px;
    right: 80px;
    width: 440px;
    height: 440px;
    border: 1px dashed rgba(0, 102, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.inst-hero-container {
    position: relative;
    z-index: 2;
}

.inst-hero-row {
    display: flex;
    align-items: center;
    position: relative;
}

.inst-hero-text-col {
    padding-bottom: 60px;
    z-index: 2;
}

/* Badge */
.inst-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 102, 255, 0.2);
    color: #0066ff;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.06);
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.inst-hero-badge i {
    font-size: 14px;
    color: #0066ff;
}

/* Heading */
.inst-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0b1c3f;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
}

.inst-hero-title .inst-hero-highlight {
    color: #0066ff;
    display: inline-block;
}

/* Description */
.inst-hero-desc {
    font-size: 15.5px;
    line-height: 1.7;
    color: #556987;
    max-width: 500px;
    margin-bottom: 30px;
}

/* Watch Video Button */
.inst-hero-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ff0076;
    background: linear-gradient(135deg, #ff0076 0%, #ee0060 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    padding: 8px 24px 8px 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 0, 118, 0.42);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    text-decoration: none;
}

.inst-hero-video-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 30px rgba(255, 0, 118, 0.55);
    color: #ffffff !important;
}

.inst-btn-icon-circle {
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff0076;
    font-size: 13px;
    padding-left: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.inst-hero-video-btn:hover .inst-btn-icon-circle {
    transform: scale(1.08);
}

/* Right Image Col */
.inst-hero-img-col {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
    margin-bottom: 0;
    padding-bottom: 0;
}

.inst-hero-person-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    max-width: 750px;
    margin-bottom: 0;
}

.inst-hero-person-img {
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 15px 30px rgba(11, 28, 63, 0.12));
    margin-bottom: 0;
}


/* Responsive */
@media (max-width: 991px) {
    .inst-hero-section {
        padding-top: 45px;
    }
    .inst-hero-text-col {
        text-align: center;
        padding-bottom: 25px;
    }
    .inst-hero-badge {
        margin-left: auto;
        margin-right: auto;
    }
    .inst-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .inst-hero-action {
        display: flex;
        justify-content: center;
    }
    .inst-hero-img-col {
        justify-content: center;
    }
    .inst-hero-person-wrap {
        justify-content: center;
        max-width: 520px;
    }
    .inst-hero-person-img {
        max-width: 520px;
        object-position: bottom center;
    }
    .inst-dot-matrix-left {
        left: 15px;
        opacity: 0.4;
    }
    .inst-dot-matrix-right {
        right: 15px;
        opacity: 0.4;
    }
    .inst-orbital-ring {
        opacity: 0.5;
        right: -100px;
    }
}

@media (max-width: 576px) {
    .inst-hero-section {
        padding-top: 35px;
    }
    .inst-hero-person-wrap {
        max-width: 100%;
    }
    .inst-hero-person-img {
        max-width: 100%;
    }
}