/* ============================================================
   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; }

/* ---------- 35. XSOL CLOUD PLATFORM MAP (running dashed lines) ---------- */

.cloudmap-section {
    background: linear-gradient(180deg, #f2f9fe 0%, #e8f4fc 55%, #f4f9fd 100%);
    padding: 64px 0 72px;
    overflow: hidden;
}
.cloudmap-title {
    text-align: center;
    font-size: 2.1rem;
    font-weight: 800;
    color: #0E1726;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.cloudmap-sub {
    text-align: center;
    color: #0264af;
    font-weight: 600;
    margin-bottom: 46px;
}

/* Stage: 3 columns + SVG overlay */
.cloudmap-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 520px;
}
.cloudmap-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.cm-line {
    fill: none;
    stroke-width: 2.2;
    stroke-dasharray: 7 7;
    animation: cmDash 1.1s linear infinite;
}
.cm-line-l { stroke: #0078D4; }
.cm-line-r { stroke: #1aaaff; }
@keyframes cmDash {
    to { stroke-dashoffset: -28; }      /* dashes laptop ki taraf "run" karti hain */
}

/* Feature rows */
.cm-col {
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: relative;
    z-index: 1;
}
.cm-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-right { flex-direction: row-reverse; }

.cm-ic {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: #eaf6fb;
    border: 1.5px solid rgba(0, 120, 212, 0.30);
    color: #0078D4;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.cm-pill {
    background: #ffffff;
    border: 1px solid #e3eef7;
    border-radius: 999px;
    padding: 13px 24px;
    font-weight: 600;
    font-size: 0.98rem;
    color: #0E1726;
    box-shadow: 0 6px 16px rgba(14, 23, 38, 0.07);
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cm-row:hover .cm-pill {
    transform: translateY(-3px);
    border-color: rgba(0, 120, 212, 0.5);
    box-shadow: 0 12px 26px rgba(14, 23, 38, 0.12);
}
.cm-row:hover .cm-ic {
    background: #0078D4;
    color: #ffffff;
    transform: scale(1.12);
}

/* Center laptop */
.cm-center {
    position: relative;
    z-index: 1;
    text-align: center;
}
.cm-laptop { display: inline-block; }
.cm-screen {
    width: 270px;
    height: 180px;
    background: #ffffff;
    border: 10px solid #0E1726;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 50px rgba(14, 23, 38, 0.22);
    overflow: hidden;
}
.cm-screen img {
    width: 150px;
    animation: cmLogoFloat 5s ease-in-out infinite;
}
@keyframes cmLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.cm-base {
    width: 330px;
    height: 14px;
    margin: 0 auto;
    background: #0E1726;
    border-radius: 0 0 16px 16px;
}
.cm-platform-badge {
    display: inline-block;
    margin-top: 18px;
    background: #0E1726;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    padding: 10px 26px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(14, 23, 38, 0.28);
}

/* MOBILE / TABLET: laptop upar, features 1-2 col grid, lines hidden */
@media (max-width: 991.98px) {
    .cloudmap-stage {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 30px;
    }
    .cloudmap-lines { display: none; }
    .cm-center { order: -1; }
    .cm-col { gap: 14px; }
    .cm-right { flex-direction: row; }         /* sab left-aligned */
    .cm-pill { white-space: normal; flex: 1; }
    .cloudmap-title { font-size: 1.5rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .cm-col {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cm-line, .cm-screen img { animation: none; }
}

/* ---------- 36. CLOUDMAP LINES — ENDPOINT DOTS ---------- */
.cm-dot-l { fill: #0078D4; }
.cm-dot-r { fill: #1aaaff; }

/* ---------- 37. CLOUDMAP — LAPTOP POSITION TWEAK ---------- */
/* Laptop ko thoda upar shift — lines aur badge better balance.
   (Lines JS se redraw hoti hain, toh touch waisa hi perfect rahega) */
@media (min-width: 992px) {
    .cm-center {
        transform: translateY(-22px);
    }
}

/* ---------- 38. CLOUDMAP — SCREEN KO BASE PAR CENTER ---------- */
/* Screen (290px) base (330px) ke andar left chipki thi — ab center */
.cm-screen {
    margin: 0 auto;
}

/* ---------- 39. NEW MENU — ICONS REMAPPED (9 items) ---------- */

/* purane 5-item mapping reset */
.navbar-nav > .nav-item > .nav-link::before { content: none; }

/* naye main menu icons */
.navbar-nav > .nav-item:nth-child(1) > .nav-link::before { content: "\f015"; } /* Home */
.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: "\f0eb"; } /* Solutions: lightbulb */
.navbar-nav > .nav-item:nth-child(4) > .nav-link::before { content: "\f005"; } /* Success Stories: star */
.navbar-nav > .nav-item:nth-child(5) > .nav-link::before { content: "\f1ad"; } /* Industries: building */
.navbar-nav > .nav-item:nth-child(6) > .nav-link::before { content: "\f0c0"; } /* About us: users */
.navbar-nav > .nav-item:nth-child(7) > .nav-link::before { content: "\f0b1"; } /* Careers: briefcase */
.navbar-nav > .nav-item:nth-child(8) > .nav-link::before { content: "\f0e0"; } /* Contact Us: envelope */

/* dropdown item icons — purane mapping clear, naye set */
.navbar .dropdown-item::before,
.navbar .dropdown-menu .dropdown-item:hover::before { content: none; }

/* Services (2nd) */
.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: "\f0b1"; } /* IT Consulting */
.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"; } /* IT Infrastructure */

/* Solutions (3rd) */
.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: "\f0c2"; } /* Mota Cloud */
.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: "\f233"; } /* Servers */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(3) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(3) .dropdown-item:hover::before { content: "\f1c0"; } /* Datacenter */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(4) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(4) .dropdown-item:hover::before { content: "\f6ff"; } /* Network */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(5) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(5) .dropdown-item:hover::before { content: "\f3ed"; } /* Data Security */
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(6) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(3) .dropdown-menu li:nth-child(6) .dropdown-item:hover::before { content: "\f56c"; } /* Software Services */

/* CTA "Consult Now" icon */
.navbar .btn-primary::before { content: "\f590"; }   /* headset */

/* 9 items ab zyada hain -> desktop par compact spacing */
@media (min-width: 992px) {
    .navbar .nav-link { padding: 0.5rem 0.6rem !important; font-size: 0.92rem; }
    .navbar-nav > .nav-item > .nav-link::before { margin-right: 5px; font-size: 0.82em; }
    .navbar .btn-primary { padding: 0.52rem 1.1rem; font-size: 0.9rem; }
    .navbar .navbar-brand img { width: 155px; min-width: 140px; }
    .navbar .nav-link:hover,
    .navbar .nav-item.dropdown:hover > .nav-link { background-size: calc(100% - 1.2rem) 2.5px; }
}
@media (min-width: 1400px) {
    .navbar .nav-link { padding: 0.5rem 0.8rem !important; font-size: 0.96rem; }
    .navbar .navbar-brand img { width: 175px; }
}

/* ---------- 40. MENU ICONS — CAREERS REMOVED (8 items) ---------- */
.navbar-nav > .nav-item > .nav-link::before { content: none; }

.navbar-nav > .nav-item:nth-child(1) > .nav-link::before { content: "\f015"; } /* Home */
.navbar-nav > .nav-item:nth-child(2) > .nav-link::before { content: "\f085"; } /* Services */
.navbar-nav > .nav-item:nth-child(3) > .nav-link::before { content: "\f0eb"; } /* Solutions */
.navbar-nav > .nav-item:nth-child(4) > .nav-link::before { content: "\f005"; } /* Success Stories */
.navbar-nav > .nav-item:nth-child(5) > .nav-link::before { content: "\f1ad"; } /* Industries */
.navbar-nav > .nav-item:nth-child(6) > .nav-link::before { content: "\f0c0"; } /* About us */
.navbar-nav > .nav-item:nth-child(7) > .nav-link::before { content: "\f0e0"; } /* Contact Us */

/* ek item kam -> thodi zyada saans */
@media (min-width: 992px) {
    .navbar .nav-link { padding: 0.5rem 0.72rem !important; font-size: 0.95rem; }
    .navbar .navbar-brand img { width: 168px; }
}

/* ---------- 41. MENU ICONS — ABOUT US DROPDOWN (7 items) ---------- */
.navbar-nav > .nav-item > .nav-link::before { content: none; }

.navbar-nav > .nav-item:nth-child(1) > .nav-link::before { content: "\f015"; } /* Home */
.navbar-nav > .nav-item:nth-child(2) > .nav-link::before { content: "\f085"; } /* Services */
.navbar-nav > .nav-item:nth-child(3) > .nav-link::before { content: "\f0eb"; } /* Solutions */
.navbar-nav > .nav-item:nth-child(4) > .nav-link::before { content: "\f1ad"; } /* Industries */
.navbar-nav > .nav-item:nth-child(5) > .nav-link::before { content: "\f0c0"; } /* About us */
.navbar-nav > .nav-item:nth-child(6) > .nav-link::before { content: "\f0e0"; } /* Contact Us */

/* About us dropdown ke items */
.navbar-nav > .nav-item:nth-child(5) .dropdown-menu li:nth-child(1) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(5) .dropdown-menu li:nth-child(1) .dropdown-item:hover::before { content: "\f05a"; } /* About us: info */
.navbar-nav > .nav-item:nth-child(5) .dropdown-menu li:nth-child(2) .dropdown-item::before,
.navbar-nav > .nav-item:nth-child(5) .dropdown-menu li:nth-child(2) .dropdown-item:hover::before { content: "\f005"; } /* Success Stories: star */

/* items kam -> comfortable spacing wapas */
@media (min-width: 992px) {
    .navbar .nav-link { padding: 0.55rem 0.9rem !important; font-size: 0.98rem; }
    .navbar .navbar-brand img { width: 180px; }
    .navbar .btn-primary { padding: 0.58rem 1.35rem; font-size: 0.95rem; }
}

/* ---------- 42. DROPDOWN HOVER GAP FIX ----------
   BUG: .dropdown-menu par `margin-top: 0.4rem` tha — nav-link aur
   dropdown ke beech ~6px ka KHALI GAP ban jata tha. Mouse jaise hi
   us gap par aata, na link hover mein rehta na menu -> dropdown
   turant band. Fix: margin hataakar transparent "bridge" banaya. */

@media (min-width: 992px) {
    .navbar .nav-item.dropdown > .dropdown-menu {
        margin-top: 0 !important;
        top: 100%;
        /* padding-top gap ki jagah lega — dikhta nahi, par hover-able hai */
        padding-top: 0.95rem;
        background-clip: padding-box;
        border-top-color: transparent;
    }

    /* invisible bridge: nav-item ke neeche ek hover-able strip */
    .navbar .nav-item.dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
        background: transparent;
    }

    /* bridge ya menu par hote hue bhi dropdown khula rahe */
    .navbar .nav-item.dropdown:hover > .dropdown-menu,
    .navbar .nav-item.dropdown:focus-within > .dropdown-menu {
        display: block;
    }

    .navbar .nav-item.dropdown { position: relative; }
}

/* ---------- 43. FEATURED SUCCESS STORIES (right-to-left carousel) ---------- */

.stories-section {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    padding: 62px 0 68px;
}
.stories-eyebrow {
    text-align: center;
    color: #0078D4;
    font-size: 1.45rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.stories-heading {
    text-align: center;
    color: #0E1726;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.stories-sub {
    text-align: center;
    color: #0a59e7;
    font-size: 1.25rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 34px;
}
.stories-sub::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 76px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
}

.stories-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stories-track {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 2px 16px;
}
.stories-track::-webkit-scrollbar { display: none; }

/* 4 cards desktop / 3 laptop / 2 tablet / 1.15 mobile */
.story-card {
    flex: 0 0 calc((100% - 72px) / 4);
    background: #ffffff;
    border: 1.5px solid rgba(0, 120, 212, 0.35);
    border-radius: 16px;
    padding: 14px 14px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease, border-color 0.32s ease;
}
@media (max-width: 1199.98px) { .story-card { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 991.98px)  { .story-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575.98px)  { .story-card { flex-basis: 84%; } }

.story-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);
}
.story-photo {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #0E1726;
}
.story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.story-card:hover .story-photo img { transform: scale(1.07); }

.story-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0a59e7;
    line-height: 1.5;
    margin: 16px 4px 18px;
    flex: 1;
}

.story-download {
    background: #0E1726;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 11px 32px;
    cursor: pointer;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.story-download::before {
    content: "\f019";                      /* fa-download */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.92em;
}
.story-download:hover {
    background: #0078D4;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 120, 212, 0.40);
}

/* Arrows */
.st-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;
    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;
}
.st-arrow:hover {
    background: #0078D4; color: #fff; border-color: #0078D4;
    transform: scale(1.08);
}
@media (max-width: 767.98px) {
    .st-arrow { display: none; }
    .stories-eyebrow { font-size: 1.15rem; }
    .stories-heading { font-size: 1.2rem; }
    .stories-sub { font-size: 1.05rem; }
}

/* ---------- 44. TESTIMONIALS — NEW CARD GRID DESIGN ---------- */

.tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    width: 100%;
    padding: 8px 12px 4px;
}
@media (max-width: 991.98px) { .tm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) { .tm-grid { grid-template-columns: 1fr; gap: 18px; } }

.tm-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6f0f8;
    border-radius: 18px;
    padding: 30px 26px 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(14, 23, 38, 0.07);
    overflow: hidden;
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.34s ease, border-color 0.34s ease;
}
/* top gradient bar — hover par reveal */
.tm-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.34s ease;
}
.tm-card:hover {
    transform: translateY(-9px);
    border-color: rgba(0, 120, 212, 0.35);
    box-shadow: 0 24px 48px rgba(14, 23, 38, 0.14),
                0 0 0 3px rgba(0, 120, 212, 0.10);
}
.tm-card:hover::before { transform: scaleX(1); }

/* watermark quote mark */
.tm-quote-mark {
    position: absolute;
    top: 18px; right: 20px;
    font-size: 2.6rem;
    color: rgba(0, 120, 212, 0.10);
    line-height: 1;
    transition: color 0.34s ease, transform 0.34s ease;
}
.tm-card:hover .tm-quote-mark {
    color: rgba(0, 120, 212, 0.20);
    transform: scale(1.08) rotate(-6deg);
}

.tm-stars {
    color: #ffc107;
    font-size: 0.92rem;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.tm-text {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #374151;
    font-style: normal;
    margin: 0 0 22px;
    flex: 1;
    position: relative;
    z-index: 1;
}
.tm-text::before { content: "\201C"; }
.tm-text::after  { content: "\201D"; }

/* Author row */
.tm-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #eef4fa;
}
.tm-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: var(--a, #0078D4);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 120, 212, 0.30);
}
.tm-verified {
    position: absolute;
    right: -3px; bottom: -3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #22a34a;
    color: #fff;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #ffffff;
}
.tm-meta { display: flex; flex-direction: column; line-height: 1.35; }
.tm-meta strong { color: #0E1726; font-size: 1rem; }
.tm-role    { color: #0078D4; font-size: 0.86rem; font-weight: 600; }
.tm-company { color: #6b7280; font-size: 0.82rem; }

/* ---------- 45. VIDEO CARDS — YOUTUBE-STYLE PLAY BUTTON & CTA ---------- */

/* Play badge: YouTube ka red rounded-rect look */
.video-play-badge {
    width: 74px;
    height: 52px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 1.25rem;
    padding-left: 3px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: background 0.28s ease, transform 0.3s ease;
}
.video-thumb:hover .video-play-badge {
    background: #ff0000;                 /* YouTube red on hover */
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.08);
}

/* thumbnail par halka dark veil — play button pop kare */
.video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.22));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.video-thumb:hover::after { opacity: 1; }

/* CTA: "Watch Video" — YouTube red pill with play icon */
.video-readmore {
    background: #ff0000;
    color: #ffffff;
    border-radius: 999px;
    padding: 11px 30px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(255, 0, 0, 0.30);
}
.video-readmore::before {
    content: "\f04b";                    /* fa-play (solid triangle) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
}
.video-readmore:hover {
    background: #cc0000;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 0, 0, 0.42);
}

/* ---------- 46. PLAY BADGE — DEFAULT RED (black ki jagah) ---------- */
.video-play-badge {
    background: #ff0000;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35),
                0 0 0 4px rgba(255, 255, 255, 0.22);
}
.video-thumb:hover .video-play-badge {
    background: #cc0000;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 28px rgba(255, 0, 0, 0.45),
                0 0 0 5px rgba(255, 255, 255, 0.30);
}

/* ---------- 47. CLIENT LOGOS — FULL WIDTH BREAKOUT ----------
   Section parent .container ke andar tha isliye inset dikh raha
   tha. Viewport-width breakout se ab edge-to-edge.            */

.section8-companies-section {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 0;
    padding-right: 0;
}

/* andar ka content phir bhi container-width mein centered rahe */
.section8-companies-section > .container,
.section8-companies-section .swiper-ba {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- 48. PARTNER HUB — PURE CSS (GIF replaced) ---------- */

.partner-hub {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 640 / 620;
}

/* connector lines */
.ph-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ph-line {
    stroke: #0E1726;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.55;
}

/* pills */
.pt-pill {
    position: absolute;
    width: 39%;
    height: 15.5%;
    background: #ffffff;
    border: 2.5px solid #ef4444;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    box-shadow: 0 8px 20px rgba(14, 23, 38, 0.08);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}
.pt-pill img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.pt-pill:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 18px 34px rgba(14, 23, 38, 0.16);
    z-index: 3;
}

/* positions — reference layout */
.pt-tl { top: 8%;   left: 3%;  }
.pt-tr { top: 8%;   right: 3%; }
.pt-ml { top: 42%;  left: 0;   }
.pt-mr { top: 42%;  right: 0;  }
.pt-bl { bottom: 8%; left: 3%; }
.pt-br { bottom: 8%; right: 3%;}

/* center core */
.pt-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 27%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #ffe9b8, #ffd0e4, #f3d4ff, #ffe0c2, #ffe9b8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 34px rgba(14, 23, 38, 0.14);
    animation: phSpin 16s linear infinite;
    z-index: 2;
}
@keyframes phSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.pt-core img {
    width: 78%;
    animation: phSpinBack 16s linear infinite;   /* logo seedha rahe */
}
@keyframes phSpinBack {
    to { transform: rotate(-360deg); }
}

@media (max-width: 575.98px) {
    .pt-pill { width: 44%; padding: 7px 10px; border-width: 2px; }
    .pt-tl, .pt-bl { left: 0; }
    .pt-tr, .pt-br { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-core, .pt-core img { animation: none; }
}

/* ---------- 49. PARTNER HUB — SMALLER CORE + RUNNING LINES ---------- */

/* outer gradient circle chhota (27% -> 20%) */
.pt-core {
    width: 20%;
}
.pt-core img {
    width: 86%;        /* inner logo apni size par hi rahe */
}

/* lines ab dashed + running animation (center ki taraf) */
.ph-line {
    stroke: #0078D4;
    stroke-width: 2.2;
    stroke-dasharray: 7 7;
    opacity: 0.85;
    animation: phDash 1.1s linear infinite;
}
@keyframes phDash {
    to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-line { animation: none; }
}

/* ---------- 50. PARTNER HUB — ORBIT RING + CLOCKWISE POINTER ---------- */

.pt-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27%;                       /* core (20%) se thoda bahar */
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(0, 120, 212, 0.45);
    border-radius: 50%;
    z-index: 1;
    animation: ptOrbitSpin 8s linear infinite;   /* clockwise */
    pointer-events: none;
}
@keyframes ptOrbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* pointer — ring ke upar baitha hua, ring ke saath ghumta hai */
.pt-orbit-dot {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    border-radius: 50%;
    background: #0078D4;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.22),
                0 4px 10px rgba(14, 23, 38, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .pt-orbit { animation: none; }
}

/* ---------- 51. ORBIT RING — CORE PAR CHIPKA + ORANGE THEME ---------- */

/* ring ab core (20%) ke bilkul upar — 27% se 20.6% */
.pt-orbit {
    width: 20.6%;
    border: 2px dashed rgba(247, 118, 22, 0.75);   /* MOTA orange */
}

/* pointer — orange, ring ke edge par exact */
.pt-orbit-dot {
    top: -7px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #f77616;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(247, 118, 22, 0.25),
                0 4px 10px rgba(14, 23, 38, 0.22);
}

/* ---------- 52. ORBIT POINTER — FULL CIRCLE VISIBLE ----------
   Dot ka aadha hissa core circle ke peeche chhup raha tha
   (core z-index 2, orbit z-index 1). Ab orbit sabse upar. */

.pt-orbit {
    z-index: 5;
}
.pt-orbit-dot {
    z-index: 6;
}

/* ---------- 53. HERO — BADGE REMOVED, TOP SPACING BALANCE ---------- */
.hero-title { margin-top: 0; }

/* ---------- 54. "WE WORK ON" PARTNER CARDS — BOX + OUTLINE POLISH ---------- */

.workON-card {
    padding: 26px 20px;
    min-height: 132px;
    border: 1.5px solid #e3eef7;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(14, 23, 38, 0.05);
    background: #ffffff;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease,
                border-color 0.32s ease;
}

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

.workON-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 120, 212, 0.55);
    box-shadow: 0 18px 36px rgba(14, 23, 38, 0.13),
                0 0 0 3px rgba(0, 120, 212, 0.12);
}
.workON-card:hover::before { transform: scaleX(1); }

/* logos: equal visual size, centered */
.workON-logo-container { height: 100%; }
.workON-card img {
    max-width: 150px;
    max-height: 62px;
    width: auto !important;
    height: auto;
    object-fit: contain;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.workON-card:hover img { transform: scale(1.07); }

/* tighter grid rhythm */
.workON-card { margin-bottom: 22px; }

@media (max-width: 575.98px) {
    .workON-card { padding: 18px 14px; min-height: 104px; }
    .workON-card img { max-width: 118px; max-height: 48px; }
}

/* ---------- 55. OUR CERTIFICATIONS SECTION ---------- */

.certs-section {
    background: linear-gradient(180deg, #ffffff 0%, #f2f9fe 100%);
    padding: 62px 0 68px;
}

.certs-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;
}
.certs-title {
    text-align: center;
    color: #0E1726;
    font-weight: 800;
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.certs-underline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.certs-underline .b   { width: 44px; height: 3.5px; border-radius: 3px; background: #0078D4; }
.certs-underline .g   { width: 44px; height: 3.5px; border-radius: 3px; background: #22a34a; }
.certs-underline .dot { width: 7px; height: 7px; border-radius: 50%; background: #0E1726; }
.certs-sub {
    text-align: center;
    color: #4b5563;
    max-width: 680px;
    margin: 0 auto 42px;
    line-height: 1.7;
}

/* Grid: 4 / 3 / 2 columns */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1199.98px) { .certs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px)  { .certs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.cert-card {
    background: #ffffff;
    border: 1.5px solid #e3eef7;
    border-radius: 16px;
    padding: 24px 18px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(14, 23, 38, 0.06);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.32s ease, border-color 0.32s ease;
}
.cert-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease;
}
.cert-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 120, 212, 0.5);
    box-shadow: 0 20px 40px rgba(14, 23, 38, 0.13),
                0 0 0 3px rgba(0, 120, 212, 0.10);
}
.cert-card:hover::before { transform: scaleX(1); }

.cert-logo {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.cert-logo img {
    max-width: 150px;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cert-card:hover .cert-logo img { transform: scale(1.07); }

.cert-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0E1726;
    margin: 0 0 4px;
}
.cert-sub {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 575.98px) {
    .certs-title { font-size: 1.5rem; }
    .cert-logo { height: 72px; }
    .cert-logo img { max-height: 68px; max-width: 118px; }
    .cert-name { font-size: 0.9rem; }
    .cert-sub { font-size: 0.75rem; }
}

/* ---------- 56. FOOTER — DARK + UNDERLINE CURSOR EFFECT ---------- */

/* (a) Footer dark theme */
.footer-main-container,
footer.footer-main-container {
    background: #0E1726 !important;
}
.footer-bottom-section {
    background: #0a1120;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 0;
}
.footer-bottom-section p { color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; }
.designers-link { color: #1aaaff !important; text-decoration: none; }
.designers-link:hover { color: #7cc8ff !important; }

.footer-section-title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.footer-section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 38px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #0078D4, #1aaaff);
}

/* (b) Nav links: animated underline on hover (left se grow) */
.footer-navigation-link {
    color: rgba(255, 255, 255, 0.72) !important;
    text-decoration: none !important;
    display: inline-block;
    padding-bottom: 3px;
    background-image: linear-gradient(90deg, #0078D4, #1aaaff);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    transition: color 0.28s ease, background-size 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s ease;
}
.footer-navigation-link:hover {
    color: #ffffff !important;
    background-size: 100% 2px;
    transform: translateX(3px);
}
.footer-navigation-item { margin-bottom: 11px; }

/* (c) "Get In Touch" — dark box with outline */
.footer-brand-column .footer-section-title,
.footer-subscribe-title { color: #ffffff; }

.footer-subscribe-form,
.footer-subscribe-wrapper,
.footer-newsletter-form {
    background: #0a1120;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.footer-subscribe-form:focus-within,
.footer-subscribe-wrapper:focus-within,
.footer-newsletter-form:focus-within {
    border-color: rgba(0, 120, 212, 0.65);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}
.footer-subscribe-input,
.footer-email-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px;
    color: #ffffff !important;
    padding: 10px 14px;
    flex: 1;
    outline: none;
}
.footer-subscribe-input::placeholder,
.footer-email-input::placeholder { color: rgba(255, 255, 255, 0.45); }

.footer-subscribe-btn {
    background: linear-gradient(135deg, #0a84e8, #0264af) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 120, 212, 0.32);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.footer-subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 120, 212, 0.45);
}

/* (d) Social icons */
.footer-social-link,
.footer-social-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.28s ease;
}
.footer-social-link:hover,
.footer-social-icon:hover {
    background: #0078D4;
    border-color: #0078D4;
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* (e) Contact info + description text */
.footer-contact-item,
.footer-contact-item * ,
.footer-brand-description { color: rgba(255, 255, 255, 0.78) !important; }
.footer-contact-item i,
.footer-contact-item svg { color: #1aaaff !important; }

/* ---------- 57. HERO ICONS — NAVBAR SE SPACE ---------- */
/* Badge hatne se left content upar aa gaya tha aur icon grid
   navbar se touch kar rahi thi. Grid ko neeche shift. */
@media (min-width: 992px) {
    .floating-icons {
        margin-top: 34px;
    }
}

/* ============================================================
   58. XSOL BRAND PALETTE — SITE-WIDE COLOR SYSTEM
   XSOL Blue #0000FF · Corporate Blue #002E9B · Deep Navy #01163F
   Dark Navy #0C1533 · Accent Blue #1A45B4 · Light Blue #E3EBF2
   Blue Grey #869DB7 · Off White #F5F5F5 · Charcoal #333333
   ============================================================ */

:root {
    --xsol-blue:      #0000FF;
    --corp-blue:      #002E9B;
    --deep-navy:      #01163F;
    --dark-navy:      #0C1533;
    --accent-blue:    #1A45B4;
    --light-blue:     #E3EBF2;
    --blue-grey:      #869DB7;
    --off-white:      #F5F5F5;
    --charcoal:       #333333;
    --brand-gradient: linear-gradient(135deg, #0000FF 0%, #01163F 100%);
}

/* ---------- Global type & surfaces ---------- */
body { color: var(--charcoal); }
::selection { background: var(--xsol-blue); color: #fff; }

/* ---------- NAVBAR ---------- */
.navbar.sticky-top { border-bottom-color: rgba(0, 46, 155, 0.12); }
.navbar .nav-link { color: var(--deep-navy) !important; }
.navbar .nav-link:hover,
.navbar .nav-item.dropdown:hover > .nav-link { color: var(--xsol-blue) !important; }
.navbar .nav-link { background-image: linear-gradient(90deg, #0000FF, #1A45B4); }
.navbar .dropdown-menu { border-color: rgba(0, 46, 155, 0.12); }
.navbar .dropdown-item { color: var(--charcoal); }
.navbar .dropdown-item:hover { background: var(--light-blue); color: var(--corp-blue); }
.navbar .dropdown-item::before,
.navbar .dropdown-menu .dropdown-item:hover::before { color: var(--corp-blue); }
.navbar .btn-primary {
    background: linear-gradient(135deg, #0000FF 0%, #002E9B 100%);
    box-shadow: 0 6px 18px rgba(0, 46, 155, 0.35);
}
.navbar .btn-primary:hover {
    background: linear-gradient(135deg, #002E9B 0%, #01163F 100%);
    box-shadow: 0 12px 26px rgba(0, 46, 155, 0.45);
}

/* ---------- HERO ---------- */
.hero-section {
    background: linear-gradient(135deg, #ffffff 0%, var(--light-blue) 38%, #B9CBE4 70%, #4A6FD4 100%);
}
.hero-section::before { background: rgba(0, 0, 255, 0.18); }
.hero-title { color: var(--deep-navy); }
.hero-subtitle {
    background: linear-gradient(92deg, #0000FF 0%, #1A45B4 55%, #002E9B 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--xsol-blue);
}
.hero-description { color: var(--charcoal); }
.btn-explore {
    background: linear-gradient(135deg, #0000FF 0%, #002E9B 100%);
    box-shadow: 0 8px 24px rgba(0, 46, 155, 0.35);
}
.btn-explore:hover {
    background: linear-gradient(135deg, #002E9B 0%, #01163F 100%);
    box-shadow: 0 14px 32px rgba(0, 46, 155, 0.45);
}
.btn-partner { border-color: var(--corp-blue); color: var(--corp-blue); }
.btn-partner:hover { background: var(--deep-navy); border-color: var(--deep-navy); color: #fff; }
.icon-item:hover {
    box-shadow: 0 22px 44px rgba(0, 46, 155, 0.28),
                0 0 0 3px rgba(0, 0, 255, 0.32);
}
.icon-item.icon-aws { background: var(--deep-navy); }

/* ---------- SECTION HEADINGS & ACCENT BARS ---------- */
.section2-center-heading,
.indseg-title, .certs-title, .cloudmap-title,
.stories-heading, .video-stories-heading,
.section8-companies-title, .category-title { color: var(--deep-navy); }

.section2-center-heading::after,
.certs-underline .b, .indseg-underline .b,
.stories-sub::after, .video-stories-heading::after,
.section8-companies-title::after,
.footer-section-title::after {
    background: linear-gradient(90deg, #0000FF, #1A45B4);
}
.indseg-underline .dot, .certs-underline .dot { background: var(--deep-navy); }
.indseg-underline .g, .certs-underline .g { background: var(--corp-blue); }
.cloudmap-sub, .stories-sub, .video-card-title, .story-title { color: var(--corp-blue); }
.stories-eyebrow { color: var(--xsol-blue); }

/* Badge pills */
.indseg-badge, .certs-badge {
    background: var(--light-blue);
    border-color: rgba(0, 46, 155, 0.22);
    color: var(--corp-blue);
}

/* ---------- CARD SYSTEM (shared) ---------- */
.cert-card::before, .indseg-card:hover, .workON-card::before,
.card-design-card::before, .tm-card::before, .category-card .icon-box::before {
    background: linear-gradient(90deg, #0000FF, #1A45B4);
}
.cert-card, .workON-card, .story-card, .video-card,
.tm-card, .indseg-card, .section8-company-logo {
    border-color: var(--light-blue);
}
.cert-card:hover, .workON-card:hover, .section8-company-logo:hover {
    border-color: rgba(0, 46, 155, 0.5);
    box-shadow: 0 20px 40px rgba(1, 22, 63, 0.14),
                0 0 0 3px rgba(0, 0, 255, 0.10);
}
.story-card:hover, .video-card:hover, .tm-card:hover {
    border-color: var(--corp-blue);
    box-shadow: 0 20px 40px rgba(1, 22, 63, 0.16),
                0 0 0 3px rgba(0, 0, 255, 0.10);
}
.cert-name, .tm-meta strong, .indseg-label { color: var(--deep-navy); }
.cert-sub, .certs-sub, .indseg-cta, .tm-text { color: var(--charcoal); }
.tm-role { color: var(--corp-blue); }
.tm-company, .cert-sub { color: var(--blue-grey); }
.tm-avatar { box-shadow: 0 8px 18px rgba(0, 46, 155, 0.28); }

/* ---------- SECTION BACKGROUNDS ---------- */
.certs-section, .video-stories-section, .stories-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--off-white) 100%);
}
.indseg-section { background: linear-gradient(180deg, var(--off-white) 0%, var(--light-blue) 100%); }
.section8-companies-section { background: var(--off-white); }
.cloudmap-section { background: linear-gradient(180deg, var(--off-white) 0%, var(--light-blue) 55%, var(--off-white) 100%); }
.main-container-section-2 { background: var(--off-white); }

/* Dark sections -> Deep/Dark Navy */
.category-section {
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--deep-navy) 45%, var(--corp-blue) 85%, var(--accent-blue) 100%);
}
.category-section::before { background: rgba(0, 0, 255, 0.20); }
.section9::after {
    background: linear-gradient(120deg,
        rgba(12, 21, 51, 0.93) 0%,
        rgba(1, 22, 63, 0.78) 42%,
        rgba(0, 46, 155, 0.48) 100%) !important;
}
.main-section6-container {
    background: linear-gradient(135deg, var(--corp-blue) 0%, var(--accent-blue) 55%, #2B5AD0 100%);
}

/* ---------- BUTTONS (site-wide) ---------- */
.indseg-cta, .Section5_btn_primary, .btn-get-started-2,
.section9 .Section9_btn_primary, .footer-subscribe-btn, .submit-btn {
    background: linear-gradient(135deg, #0000FF 0%, #002E9B 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0, 46, 155, 0.34);
}
.indseg-cta:hover, .Section5_btn_primary:hover, .btn-get-started-2:hover,
.section9 .Section9_btn_primary:hover, .footer-subscribe-btn:hover, .submit-btn:hover {
    background: linear-gradient(135deg, #002E9B 0%, #01163F 100%) !important;
    box-shadow: 0 16px 34px rgba(0, 46, 155, 0.46);
}
.Section5_btn_secondary, .btn-white-paper, .Section6-btn-secondary {
    color: var(--corp-blue) !important;
    border-color: var(--corp-blue) !important;
}
.Section6-btn-primary { background: var(--deep-navy) !important; }
.Section6-btn-primary:hover { background: var(--dark-navy) !important; }
.video-readmore { background: #ff0000; }          /* YouTube red — brand exception */
.story-download { background: var(--deep-navy); }
.story-download:hover { background: var(--corp-blue); box-shadow: 0 10px 24px rgba(0, 46, 155, 0.40); }

/* ---------- CLOUDMAP / PARTNER HUB LINES ---------- */
.cm-line-l, .ph-line { stroke: var(--xsol-blue); }
.cm-line-r { stroke: var(--accent-blue); }
.cm-dot-l { fill: var(--xsol-blue); }
.cm-dot-r { fill: var(--accent-blue); }
.cm-ic { background: var(--light-blue); border-color: rgba(0, 46, 155, 0.28); color: var(--corp-blue); }
.cm-row:hover .cm-ic { background: var(--xsol-blue); }
.cm-row:hover .cm-pill { border-color: rgba(0, 46, 155, 0.5); }
.cm-pill { color: var(--deep-navy); border-color: var(--light-blue); }
.cm-screen { border-color: var(--deep-navy); }
.cm-base, .cm-platform-badge { background: var(--deep-navy); }

/* ---------- ARROWS / NAV CONTROLS ---------- */
.vc-arrow, .st-arrow {
    border-color: rgba(0, 46, 155, 0.4);
    color: var(--corp-blue);
}
.vc-arrow:hover, .st-arrow:hover {
    background: var(--corp-blue);
    border-color: var(--corp-blue);
}

/* ---------- FOOTER ---------- */
.footer-main-container, footer.footer-main-container { background: var(--deep-navy) !important; }
.footer-bottom-section { background: var(--dark-navy); }
.footer-navigation-link { background-image: linear-gradient(90deg, #0000FF, #1A45B4); }
.designers-link { color: var(--blue-grey) !important; }
.footer-contact-item i, .footer-contact-item svg { color: var(--blue-grey) !important; }
.footer-subscribe-form, .footer-subscribe-wrapper, .footer-newsletter-form { background: var(--dark-navy); }
.footer-subscribe-form:focus-within,
.footer-subscribe-wrapper:focus-within,
.footer-newsletter-form:focus-within {
    border-color: rgba(0, 0, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.16);
}
.footer-social-link:hover, .footer-social-icon:hover {
    background: var(--corp-blue); border-color: var(--corp-blue);
}

/* ---------- 59. HERO — NEW COPY STYLING ---------- */

/* "Design. Deploy. Manage. Scale." — punchy sub-tagline */
.hero-tagline {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--corp-blue);
    letter-spacing: 0.01em;
    margin: 0.7rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hero-tagline::before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #0000FF, #1A45B4);
    flex: 0 0 34px;
}

.hero-description strong { color: var(--deep-navy); font-weight: 700; }

/* "One Partner. One Integrated IT Ecosystem." */
.hero-strapline {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--deep-navy);
    margin: 0 0 1.6rem;
    padding-left: 14px;
    border-left: 3px solid var(--xsol-blue);
}

/* copy zyada hai -> spacing thodi compact, sab fit rahe */
.hero-description { margin-top: 0.9rem; margin-bottom: 1.1rem; }
@media (min-width: 992px) {
    .hero-title, .hero-subtitle { font-size: 2.2rem; }
    .hero-section { padding-bottom: 72px; }
}
@media (min-width: 1400px) {
    .hero-title, .hero-subtitle { font-size: 2.45rem; }
}
@media (max-width: 575.98px) {
    .hero-tagline { font-size: 1.05rem; }
    .hero-strapline { font-size: 0.92rem; }
}

/* ---------- 60. HERO — SHADOW CLEANUP + STRAPLINE BEAUTIFY ---------- */

/* (a) Overshadow hatao: hero text/heading par koi shadow nahi */
.hero-title, .hero-subtitle, .hero-tagline,
.hero-description, .hero-strapline {
    text-shadow: none !important;
}
/* hero ke bade blurred orbs bhi kam — clean gradient */
.hero-section::before,
.hero-section::after { display: none; }

/* (b) Strapline: badge-style highlight */
.hero-strapline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    border: none;
    border-left: 4px solid var(--xsol-blue);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, rgba(0, 0, 255, 0.09), rgba(0, 46, 155, 0.02));
    color: var(--deep-navy);
    font-weight: 700;
    letter-spacing: 0.005em;
    margin-bottom: 1.7rem;
    box-shadow: 0 4px 14px rgba(1, 22, 63, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-strapline::before {
    content: "\f0c1";                       /* fa-link — "one integrated" */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    color: var(--xsol-blue);
}
.hero-strapline:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(1, 22, 63, 0.10);
}

/* ---------- 61. FOOTER — LIGHT ACCENT BARS ON DARK BG ----------
   #0000FF dark navy par ghul raha tha. Light blue tone use karo. */

.footer-section-title::after {
    background: linear-gradient(90deg, #6E8FE8, #B9CBE4) !important;
    width: 44px;
    height: 3px;
    opacity: 1;
}

/* footer link hover underline bhi light */
.footer-navigation-link {
    background-image: linear-gradient(90deg, #7FA0F0, #B9CBE4) !important;
}

/* ============================================================
   62. XSOL BRAND SYSTEM v2 — OCEAN BLUE PALETTE + MONTSERRAT
   Deep Blue #005B8F · Water Blue #007FBA · Sky Blue #00AEEF
   Light Sky #66CCF2 · Airy Blue #B3E6FA
   Navy #00233D · Dark Gray #333F48 · Medium Gray #7A86BF
   Light Gray #E6EBEF · White #FFFFFF
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    --deep-blue:   #005B8F;   /* primary brand */
    --water-blue:  #007FBA;   /* buttons, highlights */
    --sky-blue:    #00AEEF;   /* key visuals, accents */
    --light-sky:   #66CCF2;   /* backgrounds, secondary */
    --airy-blue:   #B3E6FA;   /* backgrounds, secondary */
    --navy:        #00233D;   /* headings, dark sections */
    --dark-gray:   #333F48;   /* body text */
    --medium-gray: #7A86BF;   /* meta text */
    --light-gray:  #E6EBEF;   /* borders, surfaces */

    /* v1 variables ko remap (purane rules apne aap naye colors le lenge) */
    --xsol-blue:   #005B8F;
    --corp-blue:   #007FBA;
    --deep-navy:   #00233D;
    --dark-navy:   #00233D;
    --accent-blue: #00AEEF;
    --light-blue:  #E6EBEF;
    --blue-grey:   #7A86BF;
    --off-white:   #F7FAFC;
    --charcoal:    #333F48;
    --brand-gradient: linear-gradient(135deg, #005B8F 0%, #00233D 100%);
}

/* ---------- TYPOGRAPHY: Montserrat ---------- */
body, .navbar, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, p, a, span, li, div {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { color: var(--dark-gray); }
h1, h2, h3, h4, h5, h6 { color: var(--navy); letter-spacing: -0.01em; }
::selection { background: var(--deep-blue); color: #fff; }

/* ---------- NAVBAR ---------- */
.navbar.sticky-top { border-bottom-color: rgba(0, 91, 143, 0.14); }
.navbar .nav-link { color: var(--navy) !important; }
.navbar .nav-link:hover,
.navbar .nav-item.dropdown:hover > .nav-link { color: var(--water-blue) !important; }
.navbar .nav-link { background-image: linear-gradient(90deg, #005B8F, #00AEEF); }
.navbar .dropdown-item:hover { background: #EAF6FC; color: var(--deep-blue); }
.navbar .dropdown-item::before,
.navbar .dropdown-menu .dropdown-item:hover::before { color: var(--water-blue); }
.navbar .btn-primary {
    background: linear-gradient(135deg, #007FBA 0%, #005B8F 100%);
    box-shadow: 0 6px 18px rgba(0, 91, 143, 0.34);
}
.navbar .btn-primary:hover {
    background: linear-gradient(135deg, #005B8F 0%, #00233D 100%);
    box-shadow: 0 12px 26px rgba(0, 91, 143, 0.44);
}

/* ---------- HERO ---------- */
.hero-section {
    background: linear-gradient(135deg, #FFFFFF 0%, #EAF7FD 34%, var(--airy-blue) 66%, var(--sky-blue) 100%);
}
.hero-title { color: var(--navy); }
.hero-subtitle {
    background: linear-gradient(92deg, #005B8F 0%, #007FBA 50%, #00AEEF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--deep-blue);
}
.hero-description { color: var(--dark-gray); }
.hero-tagline { color: var(--water-blue); }
.hero-tagline::before { background: linear-gradient(90deg, #005B8F, #00AEEF); }
.hero-strapline {
    color: var(--navy);
    border-left-color: var(--deep-blue);
    background: linear-gradient(90deg, rgba(0, 174, 239, 0.14), rgba(0, 91, 143, 0.02));
}
.hero-strapline::before { color: var(--deep-blue); }
.btn-explore {
    background: linear-gradient(135deg, #007FBA 0%, #005B8F 100%);
    box-shadow: 0 8px 24px rgba(0, 91, 143, 0.34);
}
.btn-explore:hover {
    background: linear-gradient(135deg, #005B8F 0%, #00233D 100%);
    box-shadow: 0 14px 32px rgba(0, 91, 143, 0.46);
}
.btn-partner { border-color: var(--water-blue); color: var(--water-blue); }
.btn-partner:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.icon-item:hover {
    box-shadow: 0 22px 44px rgba(0, 35, 61, 0.26),
                0 0 0 3px rgba(0, 174, 239, 0.45);
}
.icon-item.icon-aws { background: var(--navy); }

/* ---------- HEADINGS & ACCENT BARS ---------- */
.section2-center-heading, .indseg-title, .certs-title,
.cloudmap-title, .stories-heading, .video-stories-heading,
.section8-companies-title, .category-title, .Section6-title { color: var(--navy); }

.section2-center-heading::after, .certs-underline .b, .indseg-underline .b,
.stories-sub::after, .video-stories-heading::after,
.section8-companies-title::after {
    background: linear-gradient(90deg, #005B8F, #00AEEF);
}
.indseg-underline .g, .certs-underline .g { background: var(--sky-blue); }
.indseg-underline .dot, .certs-underline .dot { background: var(--navy); }
.cloudmap-sub, .stories-sub, .video-card-title, .story-title { color: var(--water-blue); }
.stories-eyebrow { color: var(--deep-blue); }
.indseg-badge, .certs-badge {
    background: #EAF7FD;
    border-color: rgba(0, 127, 186, 0.25);
    color: var(--deep-blue);
}

/* ---------- CARDS ---------- */
.cert-card::before, .workON-card::before, .card-design-card::before,
.tm-card::before, .category-card .icon-box::before, .indseg-card:hover {
    background: linear-gradient(90deg, #005B8F, #00AEEF);
}
.cert-card, .workON-card, .story-card, .video-card,
.tm-card, .indseg-card, .section8-company-logo, .cm-pill { border-color: var(--light-gray); }
.cert-card:hover, .workON-card:hover, .section8-company-logo:hover,
.story-card:hover, .video-card:hover, .tm-card:hover {
    border-color: rgba(0, 127, 186, 0.55);
    box-shadow: 0 20px 40px rgba(0, 35, 61, 0.14),
                0 0 0 3px rgba(0, 174, 239, 0.16);
}
.cert-name, .tm-meta strong, .indseg-label, .cm-pill { color: var(--navy); }
.cert-sub, .tm-company { color: var(--medium-gray); }
.certs-sub, .tm-text, .indseg-cta { color: var(--dark-gray); }
.tm-role { color: var(--water-blue); }
.tm-avatar { box-shadow: 0 8px 18px rgba(0, 91, 143, 0.28); }
.tm-quote-mark { color: rgba(0, 174, 239, 0.16); }
.tm-card:hover .tm-quote-mark { color: rgba(0, 174, 239, 0.3); }

/* ---------- SECTION BACKGROUNDS ---------- */
.certs-section, .video-stories-section, .stories-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F9FC 100%);
}
.indseg-section { background: linear-gradient(180deg, #F7FAFC 0%, #EAF7FD 100%); }
.section8-companies-section { background: #F2F9FC; }
.cloudmap-section { background: linear-gradient(180deg, #F7FAFC 0%, #EAF7FD 55%, #F7FAFC 100%); }
.main-container-section-2 { background: #F7FAFC; }

/* dark sections */
.category-section {
    background: linear-gradient(135deg, #00233D 0%, #004E7C 48%, #007FBA 86%, #00AEEF 100%);
}
.category-section::before { background: rgba(0, 174, 239, 0.22); }
.section9::after {
    background: linear-gradient(120deg,
        rgba(0, 35, 61, 0.93) 0%,
        rgba(0, 61, 100, 0.76) 42%,
        rgba(0, 127, 186, 0.48) 100%) !important;
}
.main-section6-container {
    background: linear-gradient(135deg, #005B8F 0%, #007FBA 55%, #00AEEF 100%);
}

/* ---------- BUTTONS ---------- */
.indseg-cta, .Section5_btn_primary, .btn-get-started-2,
.section9 .Section9_btn_primary, .footer-subscribe-btn, .submit-btn {
    background: linear-gradient(135deg, #007FBA 0%, #005B8F 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 26px rgba(0, 91, 143, 0.34);
}
.indseg-cta:hover, .Section5_btn_primary:hover, .btn-get-started-2:hover,
.section9 .Section9_btn_primary:hover, .footer-subscribe-btn:hover, .submit-btn:hover {
    background: linear-gradient(135deg, #005B8F 0%, #00233D 100%) !important;
    box-shadow: 0 16px 34px rgba(0, 91, 143, 0.46);
}
.Section5_btn_secondary, .btn-white-paper, .Section6-btn-secondary {
    color: var(--water-blue) !important;
    border-color: var(--water-blue) !important;
}
.Section6-btn-primary { background: var(--navy) !important; }
.Section6-btn-primary:hover { background: #001A2E !important; }
.story-download { background: var(--navy); }
.story-download:hover { background: var(--water-blue); box-shadow: 0 10px 24px rgba(0, 127, 186, 0.4); }

/* ---------- MAPS / LINES / ICONS ---------- */
.cm-line-l, .ph-line { stroke: var(--deep-blue); }
.cm-line-r { stroke: var(--sky-blue); }
.cm-dot-l { fill: var(--deep-blue); }
.cm-dot-r { fill: var(--sky-blue); }
.cm-ic { background: #EAF7FD; border-color: rgba(0, 127, 186, 0.28); color: var(--water-blue); }
.cm-row:hover .cm-ic { background: var(--water-blue); }
.cm-row:hover .cm-pill { border-color: rgba(0, 127, 186, 0.55); }
.cm-screen { border-color: var(--navy); }
.cm-base, .cm-platform-badge { background: var(--navy); }
.vc-arrow, .st-arrow { border-color: rgba(0, 127, 186, 0.42); color: var(--water-blue); }
.vc-arrow:hover, .st-arrow:hover { background: var(--water-blue); border-color: var(--water-blue); }
.category-card:hover .icon-box {
    box-shadow: 0 26px 50px rgba(0, 35, 61, 0.45),
                0 0 0 3px rgba(0, 174, 239, 0.6);
}
.category-title::after { background: linear-gradient(90deg, #00AEEF, #FFFFFF); }

/* ---------- FOOTER ---------- */
.footer-main-container, footer.footer-main-container { background: var(--navy) !important; }
.footer-bottom-section { background: #001A2E; }
.footer-section-title::after { background: linear-gradient(90deg, #00AEEF, #B3E6FA) !important; }
.footer-navigation-link { background-image: linear-gradient(90deg, #00AEEF, #B3E6FA) !important; }
.footer-contact-item i, .footer-contact-item svg { color: var(--light-sky) !important; }
.footer-subscribe-form, .footer-subscribe-wrapper, .footer-newsletter-form { background: #001A2E; }
.footer-subscribe-form:focus-within,
.footer-subscribe-wrapper:focus-within,
.footer-newsletter-form:focus-within {
    border-color: rgba(0, 174, 239, 0.62);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.16);
}
.footer-social-link:hover, .footer-social-icon:hover {
    background: var(--water-blue); border-color: var(--water-blue);
}

/* ---------- 63. DARK SECTIONS — TEXT/ICON VISIBILITY FIX ----------
   Naye palette ka navy heading color dark sections par invisible
   ho gaya tha. In sections mein sab kuch white/light.        */

/* ===== "Top Solutions, Our Expertise" (navy gradient section) ===== */
.category-section .category-title,
.category-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 35, 61, 0.35);
}
.category-title::after {
    background: linear-gradient(90deg, #00AEEF, #B3E6FA) !important;
}
.category-card p {
    color: rgba(255, 255, 255, 0.94) !important;
}
.category-card:hover p {
    color: #FFFFFF !important;
    text-shadow: 0 0 18px rgba(0, 174, 239, 0.85);
}

/* ===== BIGNMS section (blue bg) ===== */
.main-section6-container h1,
.main-section6-container h2,
.main-section6-container h3,
.main-section6-container h4,
.main-section6-container h5,
.Section6-title,
.Section6-right-panel h1,
.Section6-right-panel h4,
.Section6-right-panel strong,
.Section6-right-panel b {
    color: #FFFFFF !important;
}
.Section6-subtitle,
.Section6-right-panel p,
.main-section6-container p {
    color: rgba(255, 255, 255, 0.92) !important;
}
.Section6-stat-number { color: #FFFFFF !important; }
.Section6-stat-label { color: rgba(255, 255, 255, 0.85) !important; }

/* BIGNMS: check icons — solid, clearly visible */
.Section6-right-panel .Section6-feature-icon,
.Section6-check-icon {
    background: #FFFFFF !important;
    border: none !important;
    color: var(--water-blue) !important;
    box-shadow: 0 4px 12px rgba(0, 35, 61, 0.22);
}
.Section6-right-panel .Section6-feature-icon svg,
.Section6-right-panel .Section6-feature-icon i,
.Section6-check-icon svg,
.Section6-check-icon i {
    color: var(--water-blue) !important;
    fill: var(--water-blue) !important;
}
.Section6-right-panel .Section6-feature-icon svg path { fill: var(--water-blue) !important; }

/* BIGNMS logo tile */
.Section6-logo-icon {
    background: #FFFFFF !important;
    border: none !important;
}
.Section6-logo-icon svg,
.Section6-logo-icon i {
    color: var(--water-blue) !important;
    fill: var(--water-blue) !important;
}
.Section6-logo-icon svg path { fill: var(--water-blue) !important; }

/* ===== Section 9 (stats over dark image) ===== */
.section9 h3, .section9 h3 span { color: #FFFFFF !important; }
.section9 .sectoin9-main-pera { color: rgba(255, 255, 255, 0.9) !important; }

/* ===== Footer headings (dark navy bg) ===== */
.footer-section-title,
.footer-main-container h1, .footer-main-container h2,
.footer-main-container h3, .footer-main-container h4, .footer-main-container h5 {
    color: #FFFFFF !important;
}