/* ============================================================
   XSOL DATA — UI Enhancement Layer (enhance.css)
   Loads AFTER style.css. Pure overrides — no HTML changes needed.
   Brand: Primary #0078D4 · Navy #0E1726
   ============================================================ */

/* ---------- 1. HERO SECTION ---------- */
.hero-section {
    background: linear-gradient(135deg, #f2faff 0%, #dff1fc 35%, #a8d9f7 70%, #2f96e4 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Soft animated glow orbs behind content */
.hero-section::before,
.hero-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: -1;
    pointer-events: none;
}
.hero-section::before {
    width: 480px; height: 480px;
    background: rgba(0, 120, 212, 0.28);
    top: -140px; left: -120px;
    animation: orbFloat 14s ease-in-out infinite;
}
.hero-section::after {
    width: 380px; height: 380px;
    background: rgba(255, 255, 255, 0.55);
    bottom: -100px; right: 22%;
    animation: orbFloat 18s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.08); }
}

/* Staggered entrance for left content */
.hero-content > * {
    animation: heroRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-content > :nth-child(1) { animation-delay: 0.05s; }
.hero-content > :nth-child(2) { animation-delay: 0.15s; }
.hero-content > :nth-child(3) { animation-delay: 0.25s; }
.hero-content > :nth-child(4) { animation-delay: 0.35s; }
.hero-content > :nth-child(5) { animation-delay: 0.45s; }
@keyframes heroRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. BADGE (XSOL Cloud pill) ---------- */
.cloud-label {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 120, 212, 0.25);
    color: #0E1726;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 1.1rem 0.4rem 1.9rem;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 120, 212, 0.12);
}
.cloud-label::before {
    content: "";
    position: absolute;
    left: 0.85rem; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #0078D4;
    box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.5);
    animation: dotPulse 2s ease-out infinite;
}
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(0, 120, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 120, 212, 0); }
}

/* ---------- 3. HEADINGS ---------- */
.hero-title {
    color: #0E1726;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.hero-subtitle {
    background: linear-gradient(92deg, #0a59e7 0%, #0078D4 45%, #1aaaff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0078D4; /* fallback */
    letter-spacing: -0.015em;
}
.hero-description {
    color: #2b3648;
    max-width: 34rem;
}

/* ---------- 4. CTA BUTTONS ---------- */
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-explore {
    background: linear-gradient(135deg, #0a84e8 0%, #0078D4 55%, #0264af 100%);
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.35);
    border-radius: 0.65rem;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-explore::after {
    content: "\2192";                 /* → arrow */
    font-weight: 700;
    transform: translateX(-4px);
    opacity: 0;
    transition: all 0.3s ease;
}
.btn-explore:hover {
    background: linear-gradient(135deg, #0264af 0%, #0078D4 100%);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 120, 212, 0.45);
    color: #fff;
}
.btn-explore:hover::after { transform: translateX(0); opacity: 1; }

/* shine sweep on hover */
.btn-explore::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.btn-explore:hover::before { left: 130%; }

.btn-partner {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    border: 2px solid #0078D4;
    color: #0264af;
    border-radius: 0.65rem;
}
.btn-partner:hover {
    background: #0E1726;
    border-color: #0E1726;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 23, 38, 0.35);
}

/* ---------- 5. FLOATING TECH ICONS (right side) ---------- */
.floating-icons { gap: 1.9rem; perspective: 800px; }

.icon-item {
    width: 92px;
    height: 92px;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(14, 23, 38, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
    animation: iconBob 6s ease-in-out infinite;
}
/* gentle idle bobbing, staggered */
.floating-icons .icon-item:nth-child(3n+1) { animation-delay: 0s; }
.floating-icons .icon-item:nth-child(3n+2) { animation-delay: 1.2s; }
.floating-icons .icon-item:nth-child(3n)   { animation-delay: 2.4s; }
@keyframes iconBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* bigger logos inside (override inline width attrs) */
.icon-item img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* rich hover: lift + tilt + blue glow ring */
.icon-item:hover {
    animation-play-state: paused;
    transform: translateY(-12px) scale(1.14) rotate(-3deg);
    box-shadow: 0 22px 44px rgba(0, 120, 212, 0.30),
                0 0 0 3px rgba(0, 120, 212, 0.35);
    z-index: 5;
}
.icon-item:hover img { transform: scale(1.12); }

/* ---------- 6. LIGHT GLOBAL POLISH ---------- */
html { scroll-behavior: smooth; }
::selection { background: #0078D4; color: #fff; }

/* consistent link-button feel on cards elsewhere */
.section-card:hover,
.service-card:hover,
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(14, 23, 38, 0.12);
    transition: all 0.3s ease;
}

/* ---------- 7. ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-section::after,
    .icon-item,
    .cloud-label::before,
    .hero-content > * { animation: none !important; }
    .btn-explore, .btn-partner, .icon-item { transition: none; }
}

/* ---------- 8. RESPONSIVE GUARD ---------- */
@media (max-width: 1199px) {
    .icon-item { width: 76px; height: 76px; }
    .icon-item img { width: 42px !important; height: 42px !important; }
}

/* ---------- 9. NAVBAR UPGRADE ---------- */
.navbar.sticky-top {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 120, 212, 0.10);
    box-shadow: 0 4px 24px rgba(14, 23, 38, 0.06) !important;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Menu links: navy, medium weight, animated underline */
.navbar .nav-link {
    color: #0E1726 !important;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.05rem !important;
    position: relative;
    transition: color 0.25s ease;
}
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: 0.25rem;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.dropdown:hover > .nav-link {
    color: #0078D4 !important;
}
.navbar .nav-link:hover::after,
.navbar .nav-item.dropdown:hover > .nav-link::after {
    transform: scaleX(1);
}
/* dropdown caret refinement */
.navbar .dropdown-toggle::after {
    vertical-align: 0.12em;
    transition: transform 0.25s ease;
}
.navbar .nav-item.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Dropdown panel: soft card w/ slide-fade in */
.navbar .dropdown-menu {
    border: 1px solid rgba(0, 120, 212, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(14, 23, 38, 0.14);
    padding: 0.55rem;
    margin-top: 0.4rem;
    min-width: 230px;
}
.navbar .dropdown-item {
    border-radius: 9px;
    padding: 0.6rem 0.9rem;
    font-weight: 500;
    color: #2b3648;
    position: relative;
    transition: all 0.22s ease;
}
.navbar .dropdown-item:hover {
    background: #eaf6fb;
    color: #0078D4;
    padding-left: 1.25rem;
}
.navbar .dropdown-item:hover::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 5px; height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #0078D4;
}

/* Desktop: open dropdown on hover (no click needed) */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation: ddIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
@keyframes ddIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CTA — Free Assessment (matches hero CTA) */
.navbar .btn-primary {
    background: linear-gradient(135deg, #0a84e8 0%, #0078D4 55%, #0264af 100%);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    box-shadow: 0 6px 18px rgba(0, 120, 212, 0.30);
    position: relative;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.navbar .btn-primary::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}
.navbar .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 120, 212, 0.42);
    background: linear-gradient(135deg, #0264af, #0078D4);
}
.navbar .btn-primary:hover::before { left: 130%; }

@media (prefers-reduced-motion: reduce) {
    .navbar .dropdown-menu { animation: none !important; }
}

/* ---------- 10. "TOP SOLUTIONS" CATEGORY SECTION ---------- */

/* Section background: deep navy -> brand blue premium gradient + glow orbs */
.category-section {
    background: linear-gradient(135deg, #0E1726 0%, #12345e 45%, #0264af 80%, #0078D4 100%);
    position: relative;
    overflow: hidden;
    padding: 64px 20px 72px;
}
.category-section::before,
.category-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.category-section::before {
    width: 420px; height: 420px;
    background: rgba(26, 170, 255, 0.20);
    top: -160px; right: -100px;
}
.category-section::after {
    width: 360px; height: 360px;
    background: rgba(10, 89, 231, 0.30);
    bottom: -140px; left: -80px;
}

/* Title: bigger + underline accent bar */
.category-title {
    font-size: 34px;
    letter-spacing: -0.01em;
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
    margin-bottom: 42px;
    z-index: 1;
}
.category-title::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 72px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1aaaff, #ffffff);
}

.category-wrapper { position: relative; z-index: 1; gap: 30px; }

/* Cards: white glass tiles — black icons ab clean dikhte hain */
.category-card .icon-box {
    width: 200px;
    height: 150px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(3, 15, 34, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                background 0.35s ease;
}

/* top accent bar — hover par reveal hota hai */
.category-card .icon-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* shine sweep */
.category-card .icon-box::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(0, 120, 212, 0.10), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.category-card .icon-box img {
    width: 95px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.35s ease;
    position: relative;
    z-index: 1;
}

/* HOVER: lift + glow ring + icon pop + accents */
.category-card:hover .icon-box {
    background: #ffffff;
    transform: translateY(-12px) scale(1.04);
    box-shadow: 0 26px 50px rgba(3, 15, 34, 0.45),
                0 0 0 3px rgba(26, 170, 255, 0.55);
}
.category-card:hover .icon-box::before { transform: scaleX(1); }
.category-card:hover .icon-box::after  { left: 130%; }
.category-card:hover .icon-box img {
    transform: scale(1.14) rotate(-2deg);
    filter: drop-shadow(0 6px 14px rgba(0, 120, 212, 0.35));
}

/* Labels */
.category-card p {
    font-size: 18px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}
.category-card:hover p {
    color: #ffffff;
    transform: translateY(-3px);
    text-shadow: 0 0 18px rgba(26, 170, 255, 0.8);
}

/* Mobile spacing */
@media (max-width: 767px) {
    .category-card .icon-box { width: 160px; height: 120px; }
    .category-card .icon-box img { width: 72px; }
}

/* ---------- 11. TRUSTED CLIENT LOGOS SECTION ---------- */

/* Section: soft light backdrop */
.section8-companies-section {
    background: linear-gradient(180deg, #ffffff 0%, #f2f9fe 60%, #eaf6fb 100%);
    padding: 56px 0 48px;
}

/* Heading upgrade */
.section8-companies-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0E1726;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 16px;
    margin-bottom: 44px;
}
.section8-companies-title span { color: #0E1726 !important; }
.section8-companies-title::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 80px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
}

/* Logo cards: white tiles, equal height, logos centered */
.section8-company-logo {
    width: 100%;
    height: 104px !important;
    object-fit: contain;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e3eef7;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(14, 23, 38, 0.06);
    filter: grayscale(1) opacity(0.75);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease,
                filter 0.32s ease,
                border-color 0.32s ease;
    cursor: pointer;
}

/* HOVER: color reveal + lift + blue ring */
.section8-company-logo:hover {
    filter: grayscale(0) opacity(1);
    transform: translateY(-8px) scale(1.05);
    border-color: rgba(0, 120, 212, 0.45);
    box-shadow: 0 18px 36px rgba(14, 23, 38, 0.14),
                0 0 0 3px rgba(0, 120, 212, 0.15);
}

/* grid rhythm */
.section8-companies-section .row { row-gap: 8px; }
.section8-companies-section .col-6,
.section8-companies-section [class*="col-"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .section8-company-logo { height: 88px !important; padding: 14px 16px; }
    .section8-companies-title { font-size: 1.15rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .section8-company-logo { transition: none; }
}

/* ---------- 12. SECTION 9 — ABOUT + STATS CARDS ---------- */

/* BG: image ke upar navy brand-tinted gradient overlay (flat black ki jagah) */
.section9::after {
    background: linear-gradient(120deg,
        rgba(14, 23, 38, 0.92) 0%,
        rgba(14, 23, 38, 0.72) 40%,
        rgba(2, 100, 175, 0.45) 100%) !important;
}

/* Left content */
.section9 h3 {
    font-size: 1.9rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 18px;
}
.section9 h3::before {
    content: "";
    position: absolute;
    left: 0; top: 26px; bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #1aaaff, #0078D4);
}
.section9 .sectoin9-main-pera {
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.8;
    padding: 30px 0;
}

/* CTA: brand gradient + shine (hero/navbar se match) */
.section9 .Section9_btn_primary {
    background: linear-gradient(135deg, #0a84e8 0%, #0078D4 55%, #0264af 100%);
    border-radius: 999px;
    padding: 13px 32px;
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.40);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.section9 .Section9_btn_primary::after {
    content: "\2192";
    font-weight: 700;
    transform: translateX(-4px);
    opacity: 0;
    transition: all 0.3s ease;
}
.section9 .Section9_btn_primary::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.section9 .Section9_btn_primary:hover {
    background: linear-gradient(135deg, #0264af, #0078D4);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 120, 212, 0.55);
}
.section9 .Section9_btn_primary:hover::after { transform: translateX(0); opacity: 1; }
.section9 .Section9_btn_primary:hover::before { left: 130%; }

/* Stats cards: frosted glass tiles */
.card-design-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 26px 22px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(3, 15, 34, 0.35);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

/* top gradient bar — hover par reveal */
.card-design-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* corner glow accent */
.card-design-card::after {
    content: "";
    position: absolute;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 120, 212, 0.12), transparent 70%);
    top: -50px; right: -50px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.card-design-card h4 {
    color: #0078D4;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}
.card-design-card p {
    color: #374151;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
}

/* HOVER: lift + glow ring + accents */
.card-design-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 26px 52px rgba(3, 15, 34, 0.50),
                0 0 0 3px rgba(26, 170, 255, 0.45);
}
.card-design-card:hover::before { transform: scaleX(1); }
.card-design-card:hover::after  { opacity: 1; }
.card-design-card:hover h4 { color: #0264af; }

/* equal-height grid */
.section9 .row.g-4 [class*="col-"] { display: flex; }

@media (prefers-reduced-motion: reduce) {
    .card-design-card, .Section9_btn_primary { transition: none; }
}

/* ---------- 13. HERO ICONS LAYOUT FIX ----------
   Original per-icon pixel offsets 60px icons ke liye tune the;
   92px cards par woh overlap kara rahe the. Yahan clean staggered
   offsets — koi collision nahi, organic scattered look bana rehta hai. */

.floating-icons { gap: 1.6rem; }

/* Row 1 */
.icon-item.icon-google    { left: -34px; right: auto; top: 14px;  bottom: auto; }
.icon-item.icon-translate { left: 0;     right: auto; top: -12px; bottom: auto; }
.icon-item.icon-feedback  { left: 26px;  right: auto; top: 18px;  bottom: auto; }
/* Row 2 */
.icon-item.icon-cloud     { left: -18px; right: auto; top: 8px;   bottom: auto; }
.icon-item.icon-windows   { left: 6px;   right: auto; top: -10px; bottom: auto; }
.icon-item.icon-amazon    { left: 30px;  right: auto; top: 14px;  bottom: auto; }
/* Row 3 */
.icon-item.icon-shield    { left: -30px; right: auto; top: -2px;  bottom: auto; }
.icon-item.icon-security  { left: 2px;   right: auto; top: 20px;  bottom: auto; }
.icon-item.icon-aws       { left: 26px;  right: auto; top: -6px;  bottom: auto; }

/* AWS: logo dark bg ke liye bana hai — white card par wash-out ho raha tha */
.icon-item.icon-aws {
    background: #0E1726;
    border-color: rgba(255, 255, 255, 0.25);
}
.icon-item.icon-aws:hover {
    box-shadow: 0 22px 44px rgba(14, 23, 38, 0.45),
                0 0 0 3px rgba(26, 170, 255, 0.55);
}

/* Square-background waali images (IOT jaisi) ke corners soften */
.icon-item img { border-radius: 10px; }

/* ---------- 14. CLIENT LOGOS — REFINEMENTS ----------
   (a) Heading properly centered — parent pehle se center kar raha tha,
       humara left/transform double-shift kar raha tha. Reset.
   (b) Logos default COLORED (grayscale hataya).                      */

.section8-companies-title {
    display: block;
    text-align: center;
    left: auto;
    transform: none;
    width: 100%;
}
.section8-companies-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Logos: full color by default, 1px border, hover par lift + glow */
.section8-company-logo {
    filter: none;                      /* colored, jaise original hain */
    opacity: 1;
    border: 1px solid #e3eef7;         /* 1px subtle border */
}
.section8-company-logo:hover {
    filter: none;
    transform: translateY(-8px) scale(1.05);
    border-color: rgba(0, 120, 212, 0.55);
    box-shadow: 0 18px 36px rgba(14, 23, 38, 0.14),
                0 0 0 3px rgba(0, 120, 212, 0.15);
}

/* ---------- 15. HERO ICONS — CLEAN ALIGNED GRID ----------
   Saare stagger offsets removed. 3x3 perfect grid — har row
   aur column ek seedhi line mein.                            */

.icon-item.icon-google,
.icon-item.icon-translate,
.icon-item.icon-feedback,
.icon-item.icon-cloud,
.icon-item.icon-windows,
.icon-item.icon-amazon,
.icon-item.icon-shield,
.icon-item.icon-security,
.icon-item.icon-aws {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
}

/* grid spacing thoda saans lene layak */
.floating-icons { gap: 1.8rem; }

/* ---------- 16. HERO — SPACING + BUTTON ICONS ---------- */

/* (a) Icon grid: width/height dono taraf spacing badhai —
      grid zyada area cover karega, blank space kam lagega */
.floating-icons {
    column-gap: 3.4rem;      /* horizontal space */
    row-gap: 2.8rem;         /* vertical space */
    right: 7%;
}
.icon-item { width: 98px; height: 98px; }
.icon-item img { width: 56px !important; height: 56px !important; }

@media (max-width: 1399px) {
    .floating-icons { column-gap: 2.4rem; row-gap: 2rem; right: 5%; }
    .icon-item { width: 88px; height: 88px; }
    .icon-item img { width: 50px !important; height: 50px !important; }
}

/* (b) CTA buttons mein Font Awesome icons */

/* Explore Marketplace -> store icon (shine sweep ki jagah) */
.btn-explore::before {
    /* purane shine-sweep styles reset */
    position: static;
    width: auto; height: auto;
    background: none;
    transform: none;
    transition: transform 0.3s ease;
    left: auto; top: auto;
    /* icon */
    content: "\f54e";                       /* fa-store */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95em;
    margin-right: 2px;
}
.btn-explore:hover::before {
    left: auto;                              /* shine animation cancel */
    transform: scale(1.15);
}

/* Book Free Consultation -> calendar-check icon */
.btn-partner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-partner::before {
    content: "\f274";                        /* fa-calendar-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95em;
    transition: transform 0.3s ease;
}
.btn-partner:hover::before { transform: scale(1.15) rotate(-6deg); }

/* ---------- 17. SITE-WIDE BUTTON ICONS (name ke hisaab se) ---------- */

/* Shared icon base */
.navbar .btn-primary::before,
.Section5_btn_primary::before,
.Section5_btn_secondary::before,
.Section6-btn-primary::before,
.Section6-btn-secondary::before,
.submit-btn::before,
.btn-get-started-2::before,
.btn-white-paper::before,
.footer-subscribe-btn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95em;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Navbar: "Free Assessment" -> clipboard-check
   (navbar btn ka purana shine-sweep ::before reset karke icon) */
.navbar .btn-primary::before {
    position: static;
    width: auto; height: auto;
    background: none;
    transform: none;
    left: auto; top: auto;
    content: "\f46c";                 /* fa-clipboard-check */
}
.navbar .btn-primary:hover::before { left: auto; transform: scale(1.15); }

/* "Get Consultation" / "Get Free Consultation" -> headset */
.Section5_btn_primary::before { content: "\f590"; }          /* fa-headset */

/* "Learn More" -> open book */
.Section5_btn_secondary::before { content: "\f518"; }        /* fa-book-open */

/* "Explore BIGNMS" -> network */
.Section6-btn-primary::before { content: "\f6ff"; }          /* fa-network-wired */

/* "Request Demo" -> play */
.Section6-btn-secondary::before { content: "\f144"; }        /* fa-circle-play */

/* Section9 "Get Free Consultation" -> headset
   (iska purana shine ::before reset, arrow ::after waisa hi rahega) */
.section9 .Section9_btn_primary::before {
    position: static;
    width: auto; height: auto;
    background: none;
    transform: none;
    left: auto; top: auto;
    content: "\f590";                 /* fa-headset */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95em;
    transition: transform 0.3s ease;
}
.section9 .Section9_btn_primary:hover::before { left: auto; transform: scale(1.15); }

/* Contact form "Send Message" -> paper plane */
.submit-btn::before { content: "\f1d8"; }                    /* fa-paper-plane */
.submit-btn:hover::before { transform: translateX(3px) rotate(8deg); }

/* "Get Started" / "Get Free Trial" -> rocket */
.btn-get-started-2::before { content: "\f135"; }             /* fa-rocket */
.btn-get-started-2:hover::before { transform: translateY(-2px) rotate(-8deg); }

/* "White Paper" -> document */
.btn-white-paper::before { content: "\f15c"; }               /* fa-file-lines */

/* Footer "Subscribe" -> paper plane */
.footer-subscribe-btn::before { content: "\f1d8"; }          /* fa-paper-plane */
.footer-subscribe-btn:hover::before { transform: translateX(3px); }

/* Hover pop for the rest */
.Section5_btn_primary:hover::before,
.Section5_btn_secondary:hover::before,
.Section6-btn-primary:hover::before,
.Section6-btn-secondary:hover::before,
.btn-white-paper:hover::before { transform: scale(1.15); }

/* ---------- 18. NAVBAR FIX: UNDERLINE + MENU ICONS ----------
   Bug: Bootstrap ka dropdown caret bhi ::after hai, humari underline
   bhi ::after thi — collision se underline shift + caret broken.
   Fix: underline ab background-gradient technique se (koi pseudo nahi),
   caret wapas normal, icons ::before par.                            */

/* (a) Purani ::after underline hatao, caret restore karo */
.navbar .nav-link:not(.dropdown-toggle)::after { content: none; }
.navbar .dropdown-toggle::after {
    position: static;
    background: none;
    height: auto;
    border-radius: 0;
    left: auto; right: auto; bottom: auto;
    transform: none;
    transition: transform 0.25s ease;
}
.navbar .nav-item.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* (b) Nayi underline — background-size animation (center se grow) */
.navbar .nav-link {
    background-image: linear-gradient(90deg, #0078D4, #1aaaff);
    background-repeat: no-repeat;
    background-position: bottom 0.3rem center;
    background-size: 0% 2.5px;
    transition: color 0.25s ease, background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .nav-link:hover,
.navbar .nav-item.dropdown:hover > .nav-link {
    background-size: calc(100% - 2.1rem) 2.5px;
}

/* (c) Main menu icons (naam ke hisaab se) */
.navbar-nav > .nav-item > .nav-link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.88em;
    margin-right: 7px;
    opacity: 0.85;
}
.navbar-nav > .nav-item:nth-child(1) > .nav-link::before { content: "\f015"; } /* Home: house */
.navbar-nav > .nav-item:nth-child(2) > .nav-link::before { content: "\f085"; } /* Services: gears */
.navbar-nav > .nav-item:nth-child(3) > .nav-link::before { content: "\f290"; } /* Marketplace: shopping-bag */
.navbar-nav > .nav-item:nth-child(4) > .nav-link::before { content: "\f0c0"; } /* About Us: users */
.navbar-nav > .nav-item:nth-child(5) > .nav-link::before { content: "\f0e0"; } /* Contact: envelope */

/* (d) Dropdown items: hover-dot ki jagah permanent icons */
.navbar .dropdown-item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
    margin-right: 9px;
    color: #0078D4;
    opacity: 0.8;
}
/* hover par dot-geometry reset (icon apni jagah rahe) */
.navbar .dropdown-menu .dropdown-item:hover::before {
    position: static;
    background: none;
    width: auto; height: auto;
    margin-top: 0;
    border-radius: 0;
    opacity: 1;
}

/* Services dropdown (2nd nav item) */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(1) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(1) .dropdown-item:hover::before { content: "\f0c2"; } /* Cloud: cloud */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(2) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(2) .dropdown-item:hover::before { content: "\f233"; } /* Server: server */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(3) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(3) .dropdown-item:hover::before { content: "\f1c0"; } /* Data Center: database */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(4) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(4) .dropdown-item:hover::before { content: "\f3ed"; } /* Security: shield */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(5) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(5) .dropdown-item:hover::before { content: "\f6ff"; } /* Network: network-wired */
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(6) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(2) .dropdown-menu li:nth-child(6) .dropdown-item:hover::before { content: "\f56c"; } /* Software Licensing: file-contract */

/* Marketplace dropdown (3rd nav item) */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(1) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(1) .dropdown-item:hover::before { content: "\f54e"; } /* Big Server Mart: store */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(2) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(2) .dropdown-item:hover::before { content: "\f781"; } /* Blogs: blog */

/* ---------- 19. NAVBAR LAYOUT FIX (DESKTOP + MOBILE) ---------- */

/* (a) Text wrapping band — har link/button ek hi line mein rahega */
.navbar .nav-link,
.navbar .btn-primary,
.navbar .dropdown-item {
    white-space: nowrap;
}

/* (b) Desktop: icons ke saath fit hone ke liye spacing thodi compact */
@media (min-width: 992px) {
    .navbar .nav-link {
        padding: 0.55rem 0.85rem !important;
        font-size: 0.98rem;
    }
    .navbar .nav-link {
        background-position: bottom 0.3rem center;
    }
    .navbar .nav-link:hover,
    .navbar .nav-item.dropdown:hover > .nav-link {
        background-size: calc(100% - 1.7rem) 2.5px;
    }
    .navbar .btn-primary {
        padding: 0.55rem 1.3rem;
        font-size: 0.95rem;
    }
}

/* Bade desktops par wapas thoda open spacing */
@media (min-width: 1300px) {
    .navbar .nav-link {
        padding: 0.55rem 1.05rem !important;
        font-size: 1rem;
    }
    .navbar .nav-link:hover,
    .navbar .nav-item.dropdown:hover > .nav-link {
        background-size: calc(100% - 2.1rem) 2.5px;
    }
}

/* (c) MOBILE / TABLET (collapsed menu) — proper stacked layout */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: #ffffff;
        border-radius: 14px;
        padding: 0.75rem 1rem 1rem;
        margin-top: 0.75rem;
        box-shadow: 0 14px 34px rgba(14, 23, 38, 0.10);
        border: 1px solid #e8f1f9;
    }
    .navbar .nav-link {
        padding: 0.7rem 0.5rem !important;
        border-bottom: 1px solid #f0f6fb;
        background-image: none;              /* underline sirf desktop par */
    }
    .navbar .nav-item:last-of-type .nav-link { border-bottom: none; }

    /* Dropdown: mobile mein flat indented list (floating card nahi) */
    .navbar .dropdown-menu {
        border: none;
        box-shadow: none;
        background: #f5faff;
        margin: 0.25rem 0 0.5rem 0.75rem;
        padding: 0.35rem;
        min-width: auto;
        animation: none;
    }

    /* CTA: apni line mein, comfortable size */
    .navbar .nav-item.ms-lg-3 { margin-top: 0.75rem; }
    .navbar .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.65rem 1.6rem;
    }

    /* mobile mein idle icon-bob jaisi cheezein navbar ko affect na karein */
    .navbar .nav-link:hover { background-image: none; }
}

/* (d) Toggler (hamburger) thoda refined */
.navbar-toggler {
    border: 1px solid rgba(0, 120, 212, 0.35);
    border-radius: 10px;
    padding: 6px 10px;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

/* ---------- 20. STATS CARDS — HOVER READABILITY FIX ----------
   Original CSS hover par card ko blue gradient kar deta tha,
   jisse blue heading + gray text invisible ho jata tha.
   Fix: card hover par white hi rahega — text hamesha readable. */

.card-design-card:hover {
    background: #ffffff;
    color: inherit;
}
.card-design-card:hover h4 {
    color: #0264af;         /* deep blue — white par crisp */
}
.card-design-card:hover p {
    color: #374151;         /* body gray — readable */
}

/* ---------- 21. CLIENT LOGOS — BG UNIFORM + LAST ROW CENTER ---------- */

/* Gradient ki jagah ek hi soft flat tone — poore section mein
   ek jaisa color, koi band/patch nahi dikhega */
.section8-companies-section {
    background: #f4f9fd;
}

/* Aakhri adhoori row (4 logos) center mein — corner ka khaali
   gap ab awkward nahi lagega */
.section8-companies-section .row {
    justify-content: center;
}

/* ---------- 22. NAVBAR WIDTH FIX + HERO SPACING ----------
   style.css ke .nav-link { margin: 0 1rem } aur navbar-nav
   { margin-right: 117px } ki wajah se menu itna chauda ho
   raha tha ki logo squeeze hokar gayab ho gaya.            */

/* (a) Extra margins khatam — ab sirf humari compact padding */
.navbar-nav .nav-link {
    margin: 0 !important;
}
@media (min-width: 1200px) {
    .navbar-expand-lg .navbar-nav {
        margin-right: 0 !important;
    }
}

/* (b) Logo hamesha visible — kabhi squeeze na ho */
.navbar .navbar-brand {
    flex-shrink: 0;
    margin-right: 1rem;
}
.navbar .navbar-brand img {
    min-width: 150px;
    width: 170px;
}
@media (min-width: 1400px) {
    .navbar .navbar-brand img { width: 190px; }
}
.navbar > .container { flex-wrap: nowrap; }
@media (max-width: 991.98px) {
    .navbar > .container { flex-wrap: wrap; }   /* mobile collapse ke liye */
}

/* (c) Hero: icon grid ko left shift — middle ka blank space manage */
@media (min-width: 992px) {
    .floating-icons { right: 12%; }
}
@media (min-width: 1400px) {
    .floating-icons { right: 15%; }
}

/* ---------- 23. HERO — 2-LINE TITLE + 1-LINE BUTTONS ---------- */

@media (min-width: 992px) {
    /* Title size aisa ki "Your Gateway to Future Ready" ek line mein aaye */
    .hero-title    { font-size: 2.35rem; line-height: 1.18; }
    .hero-subtitle { font-size: 2.35rem; }

    /* Buttons: side-by-side, kabhi wrap nahi */
    .hero-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    .btn-explore,
    .btn-partner {
        white-space: nowrap;
        width: auto;
        padding: 0.85rem 1.5rem;
        font-size: 0.98rem;
    }
}

/* Bade screens: thoda bada, phir bhi 2-line layout maintained */
@media (min-width: 1400px) {
    .hero-title,
    .hero-subtitle { font-size: 2.6rem; }
    .btn-explore,
    .btn-partner   { padding: 0.95rem 1.8rem; font-size: 1rem; }
}

/* ---------- 24. HERO — VERTICAL RHYTHM + BOTTOM SHADOW ---------- */

/* (a) Upar ka blank space kam: min-height 100vh hata kar content-fit,
      padding balanced — badge + h1 upar shift ho jayenge */
.hero-section {
    min-height: auto;
    padding-top: 64px;
    padding-bottom: 72px;
}
@media (min-width: 992px) {
    .hero-section {
        padding-top: 72px;
        padding-bottom: 84px;
    }
}

/* (b) Content ke beech breathing space thodi behtar */
.cloud-label { margin-bottom: 1.1rem; }
.hero-title  { margin-top: 0.35rem; }
.hero-description {
    margin-top: 1.15rem;
    margin-bottom: 2.1rem;
}

/* (c) Hero ke bottom par soft shadow — next section se elegant separation */
.hero-section {
    position: relative;
    z-index: 2;
    box-shadow: 0 22px 44px -20px rgba(14, 23, 38, 0.22),
                0 8px 18px -10px rgba(0, 120, 212, 0.14);
}

/* ---------- 25. HERO TOP — NORMAL BREATHING SPACE ----------
   Pichla adjustment zyada tight ho gaya, content navbar se
   touch kar raha tha. Balanced padding.                     */

.hero-section {
    padding-top: 96px;
}
@media (min-width: 992px) {
    .hero-section {
        padding-top: 112px;
    }
}

/* ---------- 26. HERO BOTTOM SHADOW — REFINED ----------
   Pehle wala shadow zyada spread hokar gray band jaisa lag
   raha tha. Ab tight, edge ke paas, jaldi fade — crisp depth. */

.hero-section {
    box-shadow:
        0 4px 10px -6px rgba(14, 23, 38, 0.16),
        0 14px 28px -22px rgba(14, 23, 38, 0.30);
}

/* ---------- 27. FLOATING "ASK EXPERT" — WHATSAPP + CALL ---------- */

.xsol-float-connect {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* WhatsApp pill — desktop par icon + "Ask Expert" text */
.float-wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #25D366;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45),
                0 4px 10px rgba(14, 23, 38, 0.18);
    position: relative;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.float-wa .fa-whatsapp { font-size: 1.35rem; }
.float-wa:hover {
    background: #1fb857;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 34px rgba(37, 211, 102, 0.55),
                0 6px 14px rgba(14, 23, 38, 0.22);
    color: #fff !important;
}

/* attention pulse ring */
.float-wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
    animation: waPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Call button — desktop par hidden, mobile par visible */
.float-call {
    display: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0078D4;
    color: #ffffff !important;
    font-size: 1.15rem;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 120, 212, 0.40);
    transition: transform 0.28s ease, background 0.28s ease;
}
.float-call:hover { background: #0264af; transform: translateY(-3px); }

/* MOBILE: dono round buttons — call + WhatsApp, same number */
@media (max-width: 767.98px) {
    .xsol-float-connect { right: 16px; bottom: 18px; gap: 10px; }
    .float-call { display: inline-flex; }
    .float-wa {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .float-wa .fa-whatsapp { font-size: 1.5rem; }
    .float-wa-text { display: none; }      /* mobile par sirf icon */
}

@media (prefers-reduced-motion: reduce) {
    .float-wa::before { animation: none; }
}

/* ---------- 28. SECTION 2 — ISO + HEADING CENTER, BALANCED LAYOUT ---------- */

/* Centered heading — ISO badge ke theek neeche */
.section2-center-heading {
    text-align: center;
    max-width: 820px;
    margin: -14px auto 40px;
    font-size: 2.1rem;
    letter-spacing: -0.015em;
    color: #0E1726;
    position: relative;
    padding-bottom: 16px;
}
.section2-center-heading::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 76px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
}

/* Left: diagram GIF — contained, centered */
.main-container-section-2 #ImgS2D4 {
    max-width: 94%;
    display: block;
    margin: 0 auto;
}

/* Right content column breathing space */
@media (min-width: 992px) {
    .content-section-section-2 { padding-left: 22px; }
}

/* CTA buttons — equal size, aligned */
.cta-buttons-section-2 {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.btn-get-started-2,
.btn-white-paper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 172px;
    padding: 12px 24px;
    font-size: 0.98rem;
    white-space: nowrap;
}

/* Features — 2-column grid, uniform icon sizes */
.features-section-section-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    align-items: start;
}
.features-section-section-2 > h3 {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    font-size: 1.25rem;
    color: #0E1726;
}
.feature-item-section-2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
.feature-icon-section-2 {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.feature-icon-section-2 svg { width: 20px; height: 20px; }
.feature-item-section-2:hover .feature-icon-section-2 {
    transform: translateY(-3px) scale(1.08);
}
.feature-content-section-section-2-2 h4 {
    font-size: 1rem;
    margin: 0 0 4px;
    color: #0E1726;
}
.feature-content-section-section-2-2 p {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
    color: #4b5563;
}

/* Mobile: features single column */
@media (max-width: 767.98px) {
    .features-section-section-2 { grid-template-columns: 1fr; }
    .section2-center-heading { font-size: 1.55rem; margin-top: 0; }
}

/* ---------- 29. SECTION 2 <-> TOP SOLUTIONS — GAP FIX ----------
   min-height: 100vh section ko poori screen jitna khinch raha
   tha, content ke baad blank space chhod kar. Content-fit kiya. */

.main-container-section-2 {
    min-height: auto;
    padding-bottom: 48px;
    margin-bottom: 0;
}

/* ---------- 30. VIDEO STORIES SECTION (cards + modal player) ---------- */

.video-stories-section {
    background: linear-gradient(180deg, #ffffff 0%, #f2f9fe 100%);
    padding: 64px 0 72px;
}

.video-stories-heading {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #0E1726;
    letter-spacing: -0.015em;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 14px;
}
.video-stories-heading::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 76px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
}
.video-stories-sub {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    color: #4b5563;
    line-height: 1.7;
}

/* Cards track — desktop: centered grid; mobile: horizontal scroll-snap */
.video-cards-track {
    display: flex;
    gap: 26px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .video-cards-track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .video-card { scroll-snap-align: center; }
}

.video-card {
    flex: 0 0 300px;
    max-width: 300px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 120, 212, 0.45);
    border-radius: 16px;
    padding: 14px 14px 22px;
    text-align: center;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease, border-color 0.32s ease;
}
.video-card:hover {
    transform: translateY(-8px);
    border-color: #0078D4;
    box-shadow: 0 20px 40px rgba(14, 23, 38, 0.14),
                0 0 0 3px rgba(0, 120, 212, 0.12);
}
.video-card-template { display: none; }   /* naye videos ke liye template */

/* Thumbnail + play badge */
.video-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    background: #0E1726;
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.video-thumb:hover img { transform: scale(1.06); }
.video-play-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #0078D4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    padding-left: 4px;
    box-shadow: 0 8px 22px rgba(14, 23, 38, 0.35);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.video-thumb:hover .video-play-badge {
    background: #0078D4;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.12);
}

.video-card-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: #0a59e7;
    line-height: 1.45;
    margin: 16px 6px 18px;
    min-height: 3em;
}

/* Read More — reference jaisa navy pill */
.video-readmore {
    background: #0E1726;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.video-readmore::before {
    content: "\f144";                    /* fa-circle-play */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95em;
}
.video-readmore:hover {
    background: #0078D4;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 120, 212, 0.40);
}

/* CTA row */
.video-stories-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 42px;
}

/* Modal player */
.video-modal-content {
    background: #0E1726;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.video-modal-close {
    position: absolute;
    top: -2px; right: 4px;
    z-index: 10;
    padding: 14px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
#xsolVideoModal .modal-dialog { max-width: 960px; }

/* ---------- 31. VIDEO CAROUSEL (auto-run, 3-4 cards visible) ---------- */

.video-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Track: single row, smooth scroll, scrollbar hidden */
.video-cards-track {
    flex: 1;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 26px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 2px 14px;
}
.video-cards-track::-webkit-scrollbar { display: none; }

/* Card widths — screen ke hisaab se 3-4 comfortably visible */
.video-card { flex: 0 0 280px; max-width: 280px; }
@media (min-width: 992px)  {   /* laptop: 3 cards */
    .video-card { flex-basis: calc((100% - 52px) / 3); max-width: none; }
}
@media (min-width: 1200px) {   /* desktop: 4 cards */
    .video-card { flex-basis: calc((100% - 78px) / 4); }
}
@media (max-width: 575.98px) { /* mobile: ~1.2 card (swipe hint) */
    .video-card { flex: 0 0 82%; max-width: 82%; }
}

/* Arrows */
.vc-arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 120, 212, 0.45);
    background: #ffffff;
    color: #0078D4;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(14, 23, 38, 0.10);
    transition: all 0.25s ease;
    z-index: 2;
}
.vc-arrow:hover {
    background: #0078D4;
    color: #ffffff;
    border-color: #0078D4;
    transform: scale(1.08);
}
@media (max-width: 767.98px) {
    .vc-arrow { display: none; }        /* mobile: swipe hi enough */
}

/* ---------- 32. BIGNMS SECTION — BANNER IMAGE + FULL POLISH ---------- */

/* Section bg: flat blue -> brand gradient + depth */
.main-section6-container {
    background: linear-gradient(135deg, #0264af 0%, #0078D4 55%, #1a8fe0 100%);
    position: relative;
    overflow: hidden;
}
.main-section6-container::before {
    content: "";
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    filter: blur(60px);
    top: -160px; right: -120px;
    pointer-events: none;
}
.Section6-container .row { align-items: center; }

/* Left: card ki jagah banner image */
.bignms-banner-panel {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.bignms-banner-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 24px 54px rgba(3, 15, 34, 0.42),
                0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    animation: bannerFloat 7s ease-in-out infinite;
}
.bignms-banner-img:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 34px 68px rgba(3, 15, 34, 0.52),
                0 0 0 3px rgba(255, 255, 255, 0.30);
    animation-play-state: paused;
}
@keyframes bannerFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Right: typography polish */
.Section6-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.Section6-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.02rem;
}
.Section6-logo-icon {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(3, 15, 34, 0.25);
}

/* Feature list: uniform glass check icons + hover slide */
.Section6-right-panel .Section6-feature-icon,
.Section6-check-icon {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex; align-items: center; justify-content: center;
}
.Section6-right-panel .Section6-feature-icon svg { width: 13px; }
.Section6-right-panel li,
.Section6-right-panel .Section6-feature-item {
    transition: transform 0.25s ease;
    border-radius: 10px;
}
.Section6-right-panel li:hover { transform: translateX(6px); }
.Section6-right-panel h1 + p,
.Section6-right-panel p { color: rgba(255, 255, 255, 0.92); }
.Section6-right-panel strong,
.Section6-right-panel b { color: #ffffff; }

/* Buttons: consistent premium pair */
.Section6-btn-primary {
    background: #0E1726 !important;
    border: none;
    border-radius: 12px;
    padding: 13px 26px;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(3, 15, 34, 0.40);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.Section6-btn-primary:hover {
    background: #050b14 !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(3, 15, 34, 0.55);
}
.Section6-btn-secondary {
    background: #ffffff !important;
    color: #0264af !important;
    border: none;
    border-radius: 12px;
    padding: 13px 26px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(3, 15, 34, 0.22);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.Section6-btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(3, 15, 34, 0.35);
    color: #0078D4 !important;
}

/* Stats: 24/7 · 99.9% — bold with glass divider */
.Section6-stats {
    display: flex;
    gap: 44px;
    margin-top: 34px;
}
.Section6-stat {
    position: relative;
}
.Section6-stat + .Section6-stat::before {
    content: "";
    position: absolute;
    left: -22px; top: 8%;
    height: 84%;
    width: 1.5px;
    background: rgba(255, 255, 255, 0.30);
}
.Section6-stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(3, 15, 34, 0.30);
}
.Section6-stat-label {
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Mobile: banner upar, comfortable spacing */
@media (max-width: 767.98px) {
    .bignms-banner-img { margin-bottom: 26px; }
    .Section6-title { font-size: 1.5rem; }
    .Section6-stats { gap: 30px; }
}

/* ---------- 33. INDUSTRY SEGMENTS — REFERENCE DESIGN ---------- */

.indseg-section {
    background: linear-gradient(180deg, #f4f9fd 0%, #eef6fc 100%);
}

/* Badge pill */
.indseg-badge {
    display: inline-flex;
    align-items: center;
    background: #e3f0fb;
    border: 1px solid rgba(0, 120, 212, 0.25);
    color: #0264af;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.indseg-badge i { margin-right: 4px; font-size: 0.85rem; }

/* Heading + dual underline (blue . green) */
.indseg-title {
    text-align: center;
    color: #0E1726;
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.indseg-underline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}
.indseg-underline .b   { width: 44px; height: 3.5px; border-radius: 3px; background: #0078D4; }
.indseg-underline .g   { width: 44px; height: 3.5px; border-radius: 3px; background: #22a34a; }
.indseg-underline .dot { width: 7px;  height: 7px;   border-radius: 50%; background: #0E1726; }

/* Grid: 5 col desktop / 3 tablet / 2 mobile */
.indseg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}
@media (max-width: 1199.98px) { .indseg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991.98px)  { .indseg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px)  { .indseg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* Card: photo + overlapping icon circle + label */
.indseg-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(14, 23, 38, 0.08);
    border: 1px solid #eaf2f9;
    text-align: center;
    padding-bottom: 16px;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease;
}
.indseg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(14, 23, 38, 0.16),
                0 0 0 3px rgba(0, 120, 212, 0.12);
}
.indseg-photo {
    height: 120px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.indseg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.indseg-card:hover .indseg-photo img { transform: scale(1.08); }

.indseg-icon {
    width: 46px;
    height: 46px;
    margin: -23px auto 10px;
    border-radius: 50%;
    background: var(--c, #0078D4);
    color: #ffffff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 18px rgba(14, 23, 38, 0.22);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}
.indseg-card:hover .indseg-icon { transform: scale(1.15) rotate(-6deg); }

.indseg-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #0E1726;
    padding: 0 8px;
}

/* CTA */
.indseg-cta-wrap { margin-top: 40px; }
.indseg-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #0a84e8, #0264af);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 13px 30px;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(0, 120, 212, 0.38);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.indseg-cta i { transition: transform 0.28s ease; }
.indseg-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 120, 212, 0.50);
}
.indseg-cta:hover i { transform: translateX(4px); }

@media (max-width: 575.98px) {
    .indseg-title { font-size: 1.5rem; }
    .indseg-photo { height: 96px; }
}

/* ---------- 34. VIDEO CAROUSEL — 3 BADE CARDS ---------- */

/* Har breakpoint par pehle wale /4 rule ko override — ab 3 visible */
@media (min-width: 992px) {
    .video-card {
        flex-basis: calc((100% - 52px) / 3) !important;
        max-width: none;
    }
}
@media (min-width: 1200px) {
    .video-card {
        flex-basis: calc((100% - 52px) / 3) !important;
    }
}

/* Bade cards ke saath typography bhi badi */
.video-card { padding: 16px 16px 26px; }
.video-card-title {
    font-size: 1.12rem;
    min-height: 2.9em;
    margin: 18px 8px 20px;
}
.video-play-badge { width: 64px; height: 64px; font-size: 1.3rem; }
.video-readmore { padding: 12px 34px; font-size: 1rem; }