/* ============================================================
   HOME.CSS — Yash Infotech Private Limited  (v3 — Visual Polish)
   Scoped with #yi-page / .yi- prefix — zero conflicts with index.css
   Color Palette:
     Primary Blue  #1B2A57   Dark Blue    #0F1E46
     Accent Red    #E53935   Accent Blue  #3A63F3
     Light BG      #F6F8FC   Text Dark    #1E293B
   Rule: 60% white/light · 30% blue · 10% red accent
   ============================================================ */

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

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    /* Brand */
    --yi-blue: #1B2A57;
    --yi-blue-dark: #0F1E46;
    --yi-blue-mid: #243669;
    --yi-blue-accent: #3A63F3;
    --yi-red: #E53935;
    --yi-red-dark: #C62828;
    --yi-white: #ffffff;
    --yi-light-bg: #F6F8FC;
    --yi-gray: #EDF0F7;
    --yi-gray-mid: #D6DCE8;
    --yi-text: #1E293B;
    --yi-muted: #64748B;
    --yi-muted-light: #94A3B8;
    /* Legacy aliases kept for compat */
    --yi-navy: #1B2A57;
    --yi-navy-dark: #0F1E46;
    --yi-navy-mid: #243669;
    /* Shadows */
    --yi-shadow-xs: 0 1px 4px rgba(15,30,70,0.08);
    --yi-shadow: 0 4px 20px rgba(15,30,70,0.10);
    --yi-shadow-md: 0 8px 30px rgba(15,30,70,0.14);
    --yi-shadow-lg: 0 16px 48px rgba(15,30,70,0.18);
    /* Radii */
    --yi-radius: 16px;
    --yi-radius-sm: 8px;
    --yi-radius-xs: 6px;
    /* Motion */
    --yi-transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   HARD RESET — scoped to #yi-page only
   ============================================================ */
#yi-page,
#yi-page * {
    box-sizing: border-box !important;
}

#yi-page {
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif !important;
    color: var(--yi-text) !important;
    background: var(--yi-white) !important;
    overflow-x: hidden !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

    #yi-page ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #yi-page h1,
    #yi-page h2,
    #yi-page h3,
    #yi-page h4,
    #yi-page h5,
    #yi-page h6 {
        font-family: 'Poppins', sans-serif !important;
        line-height: 1.2 !important;
    }

    #yi-page a {
        text-decoration: none !important;
        color: inherit !important;
    }

    #yi-page img {
        max-width: 100% !important;
        display: block !important;
    }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.yi-section {
    padding: 96px 0 !important;
    width: 100% !important;
    display: block !important;
}

.yi-section-gray {
    background: var(--yi-light-bg) !important;
}

.yi-container {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    width: 100% !important;
}

/* Section headings */
.yi-sec-head {
    text-align: center !important;
    margin-bottom: 60px !important;
    width: 100% !important;
}

.yi-sec-tag {
    display: inline-block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
    color: var(--yi-red) !important;
    background: rgba(229,57,53,0.08) !important;
    border: 1px solid rgba(229,57,53,0.20) !important;
    padding: 5px 18px !important;
    border-radius: 50px !important;
    margin-bottom: 16px !important;
}

.yi-sec-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: var(--yi-text) !important;
    margin-bottom: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

    .yi-sec-title span {
        color: var(--yi-blue) !important;
    }

.yi-sec-sub {
    font-size: 15.5px !important;
    color: var(--yi-muted) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}

.yi-sec-divider {
    width: 48px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--yi-red), var(--yi-blue-accent)) !important;
    border-radius: 3px !important;
    margin: 20px auto 0 !important;
}

/* ============================================================
   FORCE WHITE TEXT — buttons & nav CTA (all states)
   ============================================================ */
.yi-nav-cta,
.yi-nav-cta:hover,
.yi-nav-cta:focus,
.yi-nav-cta:visited,
.yi-btn-primary,
.yi-btn-primary:hover,
.yi-btn-primary:focus,
.yi-btn-primary:visited,
.yi-btn-outline,
.yi-btn-outline:hover,
.yi-btn-outline:focus,
.yi-btn-outline:visited,
.yi-btn-navy,
.yi-btn-navy:hover,
.yi-btn-navy:focus,
.yi-btn-navy:visited {
    color: #ffffff !important;
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.yi-reveal {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: opacity 0.60s ease, transform 0.60s ease !important;
}

    .yi-reveal.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

.yi-reveal-left {
    opacity: 0 !important;
    transform: translateX(-24px) !important;
    transition: opacity 0.60s ease, transform 0.60s ease !important;
}

    .yi-reveal-left.visible {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

.yi-reveal-right {
    opacity: 0 !important;
    transform: translateX(24px) !important;
    transition: opacity 0.60s ease, transform 0.60s ease !important;
}

    .yi-reveal-right.visible {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

/* ============================================================
   STICKY NAVBAR
   ============================================================ */
#yi-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 0 rgba(15,30,70,0.08), 0 4px 20px rgba(15,30,70,0.06) !important;
    width: 100% !important;
    transition: box-shadow var(--yi-transition), background var(--yi-transition) !important;
}

    #yi-navbar.scrolled {
        box-shadow: 0 1px 0 rgba(15,30,70,0.10), 0 8px 32px rgba(15,30,70,0.12) !important;
        background: rgba(255,255,255,0.99) !important;
    }

.yi-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 32px !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 24px !important;
    min-height: 64px !important;
}

/* Brand */
.yi-brand {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.yi-brand-logo {
    height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
}

.yi-brand-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
}

.yi-brand-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--yi-blue) !important;
    letter-spacing: 0.2px !important;
}

    .yi-brand-name span {
        color: var(--yi-red) !important;
    }

.yi-brand-tagline {
    font-size: 8.5px !important;
    letter-spacing: 2.8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: var(--yi-muted-light) !important;
}

/* Nav Links */
.yi-navlinks {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

    .yi-navlinks li {
        margin: 0 !important;
        padding: 0 !important;
    }

        .yi-navlinks li a {
            font-family: 'Poppins', sans-serif !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            color: #334155 !important;
            padding: 8px 14px !important;
            border-radius: var(--yi-radius-xs) !important;
            display: inline-block !important;
            position: relative !important;
            transition: color var(--yi-transition) !important;
            white-space: nowrap !important;
        }

            .yi-navlinks li a::after {
                content: '' !important;
                position: absolute !important;
                bottom: 2px !important;
                left: 14px !important;
                right: 14px !important;
                height: 2px !important;
                background: var(--yi-red) !important;
                border-radius: 2px !important;
                transform: scaleX(0) !important;
                transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
                transform-origin: left !important;
            }

            .yi-navlinks li a:hover {
                color: var(--yi-blue) !important;
            }

                .yi-navlinks li a:hover::after,
                .yi-navlinks li a.active::after {
                    transform: scaleX(1) !important;
                }

            .yi-navlinks li a.active {
                color: var(--yi-blue) !important;
                font-weight: 600 !important;
            }

/* Internship CTA Button */
.yi-nav-cta {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--yi-red) !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 14px rgba(229,57,53,0.32) !important;
    transition: all var(--yi-transition) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    letter-spacing: 0.1px !important;
}

    .yi-nav-cta::after {
        display: none !important;
    }

    .yi-nav-cta:hover {
        color: #ffffff !important;
        background: var(--yi-red-dark) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 22px rgba(229,57,53,0.42) !important;
    }

/* Mobile Toggle */
.yi-toggle {
    display: none !important;
    background: none !important;
    border: 1.5px solid var(--yi-gray-mid) !important;
    border-radius: var(--yi-radius-sm) !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

    .yi-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--yi-blue) !important;
        border-radius: 2px !important;
        transition: all 0.3s !important;
    }

@media (max-width: 960px) {
    .yi-toggle {
        display: flex !important;
    }

    .yi-navlinks {
        display: none !important;
        position: absolute !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--yi-white) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 20px 16px !important;
        box-shadow: 0 16px 40px rgba(15,30,70,0.14) !important;
        gap: 2px !important;
        z-index: 9998 !important;
        border-top: 1px solid var(--yi-gray) !important;
    }

        .yi-navlinks.open {
            display: flex !important;
        }

        .yi-navlinks li a {
            padding: 10px 14px !important;
            border-radius: var(--yi-radius-sm) !important;
            display: block !important;
            width: 100% !important;
        }

            .yi-navlinks li a:hover {
                background: var(--yi-light-bg) !important;
                color: var(--yi-blue) !important;
            }

    .yi-nav-inner {
        padding: 8px 20px !important;
        position: relative !important;
    }
}

@media (max-width: 480px) {
    .yi-brand-text {
        display: none !important;
    }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#yi-hero {
    position: relative !important;
    min-height: 92vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(160deg, rgba(15,30,70,0.93) 0%, rgba(27,42,87,0.85) 45%, rgba(58,99,243,0.18) 100%), url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat fixed !important;
    overflow: hidden !important;
}

    /* Subtle red glow bottom-right */
    #yi-hero::before {
        content: '' !important;
        position: absolute !important;
        bottom: -80px !important;
        right: -80px !important;
        width: 480px !important;
        height: 480px !important;
        background: radial-gradient(circle, rgba(229,57,53,0.16) 0%, transparent 68%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* White wave bottom trim */
    #yi-hero::after {
        content: '' !important;
        position: absolute !important;
        bottom: -1px !important;
        left: 0 !important;
        right: 0 !important;
        height: 72px !important;
        background: var(--yi-white) !important;
        clip-path: polygon(0 100%, 100% 100%, 100% 25%, 0 100%) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

.yi-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 90px 28px 120px !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.yi-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(58,99,243,0.18) !important;
    border: 1px solid rgba(58,99,243,0.35) !important;
    color: rgba(255,255,255,0.90) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    padding: 7px 22px !important;
    border-radius: 50px !important;
    margin-bottom: 30px !important;
    backdrop-filter: blur(8px) !important;
    animation: yi-fadeDown 0.8s ease both !important;
}

.yi-hero-h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(2.1rem, 5.5vw, 3.9rem) !important;
    font-weight: 900 !important;
    color: var(--yi-white) !important;
    line-height: 1.10 !important;
    margin-bottom: 22px !important;
    letter-spacing: -1px !important;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25) !important;
    animation: yi-fadeUp 0.9s ease 0.15s both !important;
}

    .yi-hero-h1 .yi-accent {
        color: #E53935 !important;
        position: relative !important;
    }

.yi-hero-sub {
    font-size: 16.5px !important;
    color: rgba(255,255,255,0.68) !important;
    max-width: 580px !important;
    margin: 0 auto 46px !important;
    line-height: 1.85 !important;
    font-weight: 300 !important;
    animation: yi-fadeUp 0.9s ease 0.28s both !important;
}

.yi-hero-btns {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 64px !important;
    animation: yi-fadeUp 0.9s ease 0.40s both !important;
    color: #ffffff;
}

/* Primary CTA — solid red */
.yi-btn-primary {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: var(--yi-red) !important;
    padding: 13px 36px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 24px rgba(229,57,53,0.42) !important;
    transition: all var(--yi-transition) !important;
    border: none !important;
    letter-spacing: 0.2px !important;
}

    .yi-btn-primary:hover {
        background: var(--yi-red-dark) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 32px rgba(229,57,53,0.52) !important;
        color: #ffffff !important;
    }

/* Outline CTA */
.yi-btn-outline {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 11px 34px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    border: 2px solid rgba(255,255,255,0.40) !important;
    transition: all var(--yi-transition) !important;
    letter-spacing: 0.1px !important;
}

    .yi-btn-outline:hover {
        background: rgba(255,255,255,0.10) !important;
        border-color: rgba(255,255,255,0.80) !important;
        transform: translateY(-3px) !important;
        color: #ffffff !important;
    }

/* Hero Stat Cards */
.yi-hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    animation: yi-fadeUp 0.9s ease 0.52s both !important;
}

.yi-hstat {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 12px !important;
    padding: 16px 26px !important;
    min-width: 115px !important;
    text-align: center !important;
    transition: all var(--yi-transition) !important;
}

    .yi-hstat:hover {
        background: rgba(255,255,255,0.13) !important;
        transform: translateY(-4px) !important;
        border-color: rgba(255,255,255,0.22) !important;
    }

.yi-hstat-num {
    font-family: 'Poppins', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--yi-white) !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

    .yi-hstat-num sup {
        font-size: 14px !important;
        color: #E53935 !important;
        font-weight: 700 !important;
    }

.yi-hstat-lbl {
    font-size: 10.5px !important;
    color: rgba(255,255,255,0.50) !important;
    letter-spacing: 0.3px !important;
    font-weight: 400 !important;
}

@keyframes yi-fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

@keyframes yi-fadeDown {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

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

/* ============================================================
   SECTION 1 — PRODUCTS / SOLUTIONS
   ============================================================ */
#yi-products {
    background: var(--yi-white) !important;
}

.yi-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    width: 100% !important;
    float: none !important;
}

@media (max-width: 900px) {
    .yi-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .yi-products-grid {
        grid-template-columns: 1fr !important;
    }
}

.yi-prod-card {
    background: var(--yi-white) !important;
    border-radius: var(--yi-radius) !important;
    padding: 36px 28px 30px !important;
    box-shadow: var(--yi-shadow) !important;
    border: 1px solid rgba(27,42,87,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
    cursor: default !important;
    float: none !important;
    min-width: 0 !important;
    width: auto !important;
    align-items: center !important; /* ADD THIS */
    text-align: center !important;
}

    /* Top accent bar */
    .yi-prod-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, var(--yi-blue) 0%, var(--yi-blue-accent) 100%) !important;
        transform: scaleX(0) !important;
        transform-origin: left !important;
        transition: transform 0.32s ease !important;
        border-radius: 3px 3px 0 0 !important;
    }

    .yi-prod-card:hover {
        transform: translateY(-8px) !important;
        box-shadow: var(--yi-shadow-lg) !important;
        border-color: rgba(27,42,87,0.14) !important;
    }

        .yi-prod-card:hover::before {
            transform: scaleX(1) !important;
        }

.yi-prod-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    /*    margin-bottom: 22px !important;*/
    flex-shrink: 0 !important;
    transition: all 0.28s ease !important;
    margin: 0 auto 22px auto !important;
}

.yi-ic-blue {
    background: rgba(27,42,87,0.08) !important;
    color: var(--yi-blue) !important;
}

.yi-ic-red {
    background: rgba(229,57,53,0.09) !important;
    color: var(--yi-red) !important;
}

.yi-ic-teal {
    background: rgba(0,137,123,0.09) !important;
    color: #00897b !important;
}

.yi-prod-card:hover .yi-prod-icon {
    background: var(--yi-blue) !important;
    color: var(--yi-white) !important;
    transform: scale(1.07) !important;
}

.yi-prod-card h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17.5px !important;
    font-weight: 700 !important;
    color: var(--yi-text) !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.2px !important;
}

.yi-prod-card p {
    font-size: 14px !important;
    color: #ffffff !important;
    line-height: 1.78 !important;
    flex: 1 !important;
    margin-bottom: 26px !important;
}

.yi-prod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--yi-blue) !important;
    padding: 9px 22px;
    border-radius: 50px;
    border: 2px solid rgba(27,42,87,0.25);
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    letter-spacing: 0.1px;
    margin: 15px auto;
}

    .yi-prod-btn:hover {
        background: var(--yi-blue) !important;
        border-color: var(--yi-blue) !important;
        color: #ffffff !important;
    }

        .yi-prod-btn:hover i {
            color: #ffffff !important;
        }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
/*#yi-about {
    background: var(--yi-light-bg) !important;
    overflow: hidden !important;
}

.yi-about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    width: 100% !important;
}

@media (max-width: 880px) {
    .yi-about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

.yi-about-left {
    min-width: 0 !important;
}

    .yi-about-left .yi-sec-tag {
        display: inline-block !important;
    }

    .yi-about-left .yi-sec-title {
        text-align: left !important;
        margin-bottom: 18px !important;
    }

.yi-about-desc {
    font-size: 15px !important;
    color: var(--yi-muted) !important;
    line-height: 1.88 !important;
    margin-bottom: 30px !important;
}

.yi-about-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.yi-about-feat {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: var(--yi-white) !important;
    padding: 16px 18px !important;
    border-radius: 12px !important;
    box-shadow: var(--yi-shadow-xs) !important;
    border: 1px solid rgba(27,42,87,0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

    .yi-about-feat:hover {
        transform: translateX(5px) !important;
        box-shadow: var(--yi-shadow) !important;
        border-color: rgba(27,42,87,0.10) !important;
    }

.yi-about-feat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

    .yi-about-feat-icon.blue {
        background: rgba(27,42,87,0.08) !important;
        color: var(--yi-blue) !important;
        border-left: 3px solid var(--yi-blue) !important;
    }

    .yi-about-feat-icon.red {
        background: rgba(229,57,53,0.08) !important;
        color: var(--yi-red) !important;
        border-left: 3px solid var(--yi-red) !important;
    }

    .yi-about-feat-icon.teal {
        background: rgba(0,137,123,0.08) !important;
        color: #00897b !important;
        border-left: 3px solid #00897b !important;
    }

.yi-about-feat strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--yi-text) !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.1px !important;
}

.yi-about-feat span {
    font-size: 12.5px !important;
    color: var(--yi-muted) !important;
    line-height: 1.6 !important;
}*/

/* About right — navy stats panel */
/*.yi-about-right {
    min-width: 0 !important;
}

.yi-about-panel {
    background: linear-gradient(145deg, var(--yi-blue-dark) 0%, var(--yi-blue-mid) 100%) !important;
    border-radius: var(--yi-radius) !important;
    padding: 48px 40px !important;
    text-align: center !important;
    box-shadow: var(--yi-shadow-lg) !important;
    position: relative !important;
    overflow: hidden !important;
}

    .yi-about-panel::before {
        content: '' !important;
        position: absolute !important;
        top: -60px !important;
        right: -60px !important;
        width: 220px !important;
        height: 220px !important;
        background: radial-gradient(circle, rgba(58,99,243,0.22) 0%, transparent 70%) !important;
        pointer-events: none !important;
    }

.yi-about-panel-icon {
    font-size: 56px !important;
    color: rgba(229,57,53,0.45) !important;
    display: block !important;
    margin-bottom: 20px !important;
}

.yi-about-panel-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--yi-white) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.2px !important;
}

.yi-about-panel-addr {
    font-size: 12px !important;
    color: rgba(255,255,255,0.35) !important;
    margin-bottom: 32px !important;
    line-height: 1.6 !important;
}

.yi-about-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.yi-about-stat-box {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    padding: 18px 12px !important;
    text-align: center !important;
    transition: background 0.25s ease !important;
}

    .yi-about-stat-box:hover {
        background: rgba(255,255,255,0.10) !important;
    }

.yi-about-stat-num {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: var(--yi-white) !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}

    .yi-about-stat-num sup {
        font-size: 0.88rem !important;
        color: #E53935 !important;
        font-weight: 700 !important;
    }

.yi-about-stat-lbl {
    font-size: 10.5px !important;
    color: rgba(255,255,255,0.38) !important;
    margin-top: 6px !important;
    display: block !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}*/

.about-strip-section {
    padding: 100px 0;
}

.about-text-block {
    padding-right: 20px;
}

.section-body {
    font-size: 1rem;
    color: #4a5568;
    margin-bottom: 24px;
    line-height: 1.8;
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--dark-text);
}

    .highlight-item i {
        color: var(--red);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

/* About Visual Grid */
.about-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.av-card {
    padding: 28px 22px;
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition);
}

    .av-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
    }

.av-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.av-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.av-card p {
    font-size: .85rem;
    margin: 0;
}

.av-card--navy {
    background: var(--navy);
    color: var(--white);
}

    .av-card--navy .av-icon {
        color: #ff8a94;
    }

.av-card--red {
    background: var(--red);
    color: var(--white);
}

    .av-card--red .av-icon {
        color: var(--white);
    }

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

    .av-card--light .av-icon {
        color: var(--red);
    }

.av-card--dark {
    background: var(--dark-text);
    color: var(--white);
}

    .av-card--dark .av-icon {
        color: var(--red);
    }



/* ============================================================
   SECTION 2 — SERVICES  (dark background)
   ============================================================ */
#yi-services {
    background: var(--yi-blue-dark) !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

    /* Geometric accent top-right */
    #yi-services::before {
        content: '' !important;
        position: absolute !important;
        top: -120px !important;
        right: -120px !important;
        width: 460px !important;
        height: 460px !important;
        background: radial-gradient(circle, rgba(58,99,243,0.15) 0%, transparent 68%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Bottom-left accent */
    #yi-services::after {
        content: '' !important;
        position: absolute !important;
        bottom: -80px !important;
        left: -80px !important;
        width: 320px !important;
        height: 320px !important;
        background: radial-gradient(circle, rgba(229,57,53,0.10) 0%, transparent 65%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    #yi-services .yi-container {
        position: relative !important;
        z-index: 1 !important;
    }

    #yi-services .yi-sec-title {
        color: var(--yi-white) !important;
    }

        #yi-services .yi-sec-title span {
            color: #E53935 !important;
        }

    #yi-services .yi-sec-sub {
        color: rgba(255,255,255,0.48) !important;
    }

    #yi-services .yi-sec-tag {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.14) !important;
        color: rgba(255,255,255,0.65) !important;
    }

    #yi-services .yi-sec-divider {
        background: linear-gradient(90deg, #E53935, rgba(58,99,243,0.6)) !important;
    }

.yi-services-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

@media (max-width: 1060px) {
    .yi-services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .yi-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 380px) {
    .yi-services-grid {
        grid-template-columns: 1fr !important;
    }
}

.yi-svc-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--yi-radius) !important;
    padding: 32px 18px 28px !important;
    text-align: center !important;
    transition: all 0.28s ease !important;
    cursor: default !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

    .yi-svc-card::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, var(--yi-red), var(--yi-blue-accent)) !important;
        transform: scaleX(0) !important;
        transition: transform 0.30s ease !important;
    }

    .yi-svc-card:hover {
        background: rgba(255,255,255,0.09) !important;
        transform: translateY(-7px) !important;
        border-color: rgba(255,255,255,0.16) !important;
        box-shadow: 0 20px 50px rgba(0,0,0,0.30) !important;
    }

        .yi-svc-card:hover::after {
            transform: scaleX(1) !important;
        }

.yi-svc-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    background: rgba(229,57,53,0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #E53935 !important;
    margin: 0 auto 18px !important;
    transition: all 0.28s ease !important;
}

.yi-svc-card:hover .yi-svc-icon {
    background: var(--yi-red) !important;
    color: var(--yi-white) !important;
    transform: scale(1.10) !important;
}

.yi-svc-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.92) !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.1px !important;
}

.yi-svc-desc {
    font-size: 12px !important;
    color: rgba(255,255,255,0.40) !important;
    line-height: 1.70 !important;
}

/* ============================================================
   SECTION 3 — OUR CLIENTS SLIDER
   ============================================================ */
#yi-clients {
    background: var(--yi-light-bg) !important;
}

    #yi-clients .yi-sec-divider {
        background: linear-gradient(90deg, var(--yi-red), var(--yi-blue-accent)) !important;
    }

.yi-clients-track-outer {
    overflow: hidden !important;
    width: 100% !important;
}

.yi-clients-track {
    display: flex !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform !important;
}

.yi-client-card {
    flex: 0 0 calc((100% - 66px) / 4) !important;
    min-width: 0 !important;
    background: var(--yi-white) !important;
    border-radius: var(--yi-radius) !important;
    padding: 28px 20px !important;
    box-shadow: var(--yi-shadow-xs) !important;
    border: 1px solid rgba(27,42,87,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 140px !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
    cursor: default !important;
}

    .yi-client-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: var(--yi-shadow-md) !important;
        border-color: rgba(27,42,87,0.16) !important;
    }

.yi-client-icon-bg {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: var(--yi-light-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: var(--yi-blue) !important;
    margin-bottom: 12px !important;
    transition: all 0.28s ease !important;
}

.yi-client-card:hover .yi-client-icon-bg {
    background: var(--yi-blue) !important;
    color: var(--yi-white) !important;
}

.yi-client-logo {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: var(--yi-blue) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.2px !important;
}

    .yi-client-logo span {
        color: var(--yi-red) !important;
    }

.yi-client-sector {
    font-size: 10px !important;
    color: var(--yi-muted-light) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

@media (max-width: 960px) {
    .yi-client-card {
        flex: 0 0 calc((100% - 44px) / 3) !important;
    }
}

@media (max-width: 680px) {
    .yi-client-card {
        flex: 0 0 calc((100% - 22px) / 2) !important;
    }
}

@media (max-width: 420px) {
    .yi-client-card {
        flex: 0 0 100% !important;
    }
}

/* Slider Controls */
.yi-slider-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 36px !important;
}

.yi-slider-arrow {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(27,42,87,0.18) !important;
    background: var(--yi-white) !important;
    color: var(--yi-blue) !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: var(--yi-shadow-xs) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

    .yi-slider-arrow:hover:not(.disabled) {
        background: var(--yi-blue) !important;
        border-color: var(--yi-blue) !important;
        color: var(--yi-white) !important;
        transform: scale(1.10) !important;
        box-shadow: 0 4px 16px rgba(27,42,87,0.28) !important;
    }

    .yi-slider-arrow.disabled {
        opacity: 0.30 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

.yi-slider-dots {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.yi-sdot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--yi-gray-mid) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.28s ease !important;
}

    .yi-sdot.active {
        background: var(--yi-blue) !important;
        width: 22px !important;
        border-radius: 4px !important;
    }

.yi-clients-cta {
    text-align: center !important;
    margin-top: 44px !important;
    color: #ffffff;
}

/* View All Clients button */
.yi-btn-navy {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: var(--yi-blue) !important;
    padding: 13px 38px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 22px rgba(27,42,87,0.28) !important;
    transition: all var(--yi-transition) !important;
    letter-spacing: 0.1px !important;
}

    .yi-btn-navy:hover {
        background: var(--yi-blue-dark) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 32px rgba(27,42,87,0.40) !important;
        color: #ffffff !important;
    }

/* ============================================================
   SECTION 4 — COMPANY STATISTICS
   ============================================================ */
#yi-stats {
    background: linear-gradient(150deg, var(--yi-blue-dark) 0%, var(--yi-blue) 55%, #2C3F80 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

    #yi-stats::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(ellipse at 15% 55%, rgba(229,57,53,0.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 45%, rgba(58,99,243,0.14) 0%, transparent 50%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Subtle dot grid */
    #yi-stats::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) !important;
        background-size: 32px 32px !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    #yi-stats .yi-container {
        position: relative !important;
        z-index: 1 !important;
    }

    #yi-stats .yi-sec-title {
        color: var(--yi-white) !important;
        letter-spacing: -0.5px !important;
    }

        #yi-stats .yi-sec-title span {
            color: #E53935 !important;
        }

    #yi-stats .yi-sec-sub {
        color: rgba(255,255,255,0.44) !important;
    }

    #yi-stats .yi-sec-tag {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.14) !important;
        color: rgba(255,255,255,0.60) !important;
    }

    #yi-stats .yi-sec-divider {
        background: linear-gradient(90deg, #E53935, rgba(58,99,243,0.60)) !important;
    }

.yi-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: var(--yi-radius) !important;
    overflow: hidden !important;
    width: 100% !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

@media (max-width: 860px) {
    .yi-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

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

.yi-stat-item {
    background: rgba(255,255,255,0.03) !important;
    padding: 50px 24px !important;
    text-align: center !important;
    transition: background 0.25s ease !important;
    cursor: default !important;
    position: relative !important;
}

    .yi-stat-item:hover {
        background: rgba(255,255,255,0.08) !important;
    }

.yi-stat-icon {
    font-size: 28px !important;
    color: #E53935 !important;
    margin-bottom: 14px !important;
    display: block !important;
    opacity: 0.85 !important;
}

.yi-stat-num {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(2.4rem, 3.8vw, 3.4rem) !important;
    font-weight: 900 !important;
    color: var(--yi-white) !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 3px !important;
    letter-spacing: -1px !important;
}

    .yi-stat-num .yi-counter {
        display: inline-block !important;
    }

    .yi-stat-num .yi-suffix {
        font-size: 0.50em !important;
        color: #E53935 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

.yi-stat-label {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.44) !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#yi-footer {
    background: #0e163b !important;
    color: var(--yi-white) !important;
    padding: 72px 0 0 !important;
    display: block !important;
    width: 100% !important;
    border-top: 3px solid var(--yi-red) !important;
}

.yi-footer-grid {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr !important;
    gap: 48px !important;
    padding-bottom: 52px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    width: 100% !important;
}

@media (max-width: 1000px) {
    .yi-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}

@media (max-width: 560px) {
    .yi-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

.yi-footer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.yi-footer-logo {
    height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
}

.yi-footer-brand-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--yi-white) !important;
    letter-spacing: 0.2px !important;
}

    .yi-footer-brand-name span {
        color: #E53935 !important;
    }

.yi-footer-desc {
    font-size: 13px !important;
    color: rgba(255,255,255,0.34) !important;
    line-height: 1.88 !important;
    margin-bottom: 24px !important;
}

.yi-social-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.yi-social-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.48) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

    .yi-social-btn:hover {
        background: var(--yi-red) !important;
        border-color: var(--yi-red) !important;
        color: var(--yi-white) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(229,57,53,0.35) !important;
    }

.yi-footer-heading {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.85) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    padding-bottom: 12px !important;
}

    .yi-footer-heading::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 28px !important;
        height: 2px !important;
        background: var(--yi-red) !important;
        border-radius: 2px !important;
    }

.yi-footer-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

    .yi-footer-links li {
        margin: 0 !important;
        padding: 0 !important;
    }

        .yi-footer-links li a {
            font-size: 13px !important;
            color: rgba(255,255,255,0.36) !important;
            text-decoration: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 9px !important;
            transition: all 0.22s ease !important;
            line-height: 1.4 !important;
        }

            .yi-footer-links li a:hover {
                color: rgba(255,255,255,0.85) !important;
                transform: translateX(5px) !important;
            }

            .yi-footer-links li a i {
                color: var(--yi-red) !important;
                font-size: 9px !important;
                flex-shrink: 0 !important;
            }

.yi-footer-contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.yi-fci-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 9px !important;
    background: rgba(229,57,53,0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    color: #E53935 !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
}

.yi-fci-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.28) !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.yi-fci-value {
    font-size: 13px !important;
    color: rgba(255,255,255,0.65) !important;
    line-height: 1.65 !important;
}

    .yi-fci-value a {
        color: rgba(255,255,255,0.65) !important;
        text-decoration: none !important;
        transition: color 0.22s ease !important;
    }

        .yi-fci-value a:hover {
            color: rgba(255,255,255,0.92) !important;
        }

.yi-footer-bottom {
    padding: 22px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.yi-footer-copy {
    font-size: 12px !important;
    color: rgba(255,255,255,0.24) !important;
}

    .yi-footer-copy a {
        color: rgba(255,255,255,0.38) !important;
        text-decoration: none !important;
        transition: color 0.2s !important;
    }

.yi-footer-powered {
    font-size: 12px !important;
    color: rgba(255,255,255,0.20) !important;
}

    .yi-footer-powered a {
        color: rgba(255,255,255,0.34) !important;
        text-decoration: none !important;
        transition: color 0.2s !important;
    }

        .yi-footer-powered a:hover,
        .yi-footer-copy a:hover {
            color: #E53935 !important;
        }

@media (max-width: 560px) {
    .yi-footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#yi-back-top {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--yi-blue) !important;
    color: var(--yi-white) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    box-shadow: 0 6px 22px rgba(27,42,87,0.36) !important;
    opacity: 0 !important;
    transform: translateY(16px) !important;
    transition: all 0.28s ease !important;
    z-index: 8888 !important;
}

    #yi-back-top.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    #yi-back-top:hover {
        background: var(--yi-red) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 28px rgba(229,57,53,0.40) !important;
    }

/* ============================================================
   GLOBAL RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .yi-section {
        padding: 68px 0 !important;
    }

    .yi-hero-inner {
        padding: 64px 20px 90px !important;
    }

    .yi-stat-item {
        padding: 38px 16px !important;
    }

    .yi-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 480px) {
    .yi-section {
        padding: 52px 0 !important;
    }

    .yi-btn-primary, .yi-btn-outline {
        padding: 11px 26px !important;
        font-size: 13.5px !important;
    }

    .yi-hstat {
        padding: 13px 16px !important;
        min-width: 100px !important;
    }

    .yi-hstat-num {
        font-size: 23px !important;
    }

    .yi-sec-title {
        letter-spacing: -0.3px !important;
    }
}

/* ============================================================
   V4 VISUAL POLISH — Infosys / TCS / Accenture quality level
   Only overrides visual properties. Zero structural changes.
   ============================================================ */

/* ── VARIABLES: tighter, more refined palette ── */
#yi-page {
    --yi-blue: #1B2A57 !important;
    --yi-blue-dark: #0F1E46 !important;
    --yi-blue-mid: #22336B !important;
    --yi-blue-accent: #3A63F3 !important;
    --yi-red: #E53935 !important;
    --yi-red-dark: #C62828 !important;
    --yi-text: #1E293B !important;
    --yi-muted: #64748B !important;
    --yi-muted-light: #94A3B8 !important;
    --yi-light-bg: #F6F8FC !important;
    --yi-white: #ffffff !important;
    --yi-gray: #EDF0F7 !important;
    --yi-gray-mid: #D6DCE8 !important;
    --yi-shadow-xs: 0 1px 3px rgba(15,30,70,0.07), 0 2px 8px rgba(15,30,70,0.05) !important;
    --yi-shadow: 0 2px 8px rgba(15,30,70,0.07), 0 6px 24px rgba(15,30,70,0.09) !important;
    --yi-shadow-md: 0 4px 16px rgba(15,30,70,0.10), 0 12px 36px rgba(15,30,70,0.12) !important;
    --yi-shadow-lg: 0 8px 24px rgba(15,30,70,0.12), 0 20px 56px rgba(15,30,70,0.16) !important;
    --yi-radius: 14px !important;
    --yi-radius-sm: 8px !important;
    --yi-radius-xs: 5px !important;
    --yi-transition: 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── TYPOGRAPHY: tighter, sharper, corporate ── */
#yi-page {
    font-size: 15px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ── SECTION HEADER refinements ── */
.yi-sec-tag {
    font-size: 10px !important;
    letter-spacing: 3px !important;
    padding: 4px 16px !important;
    border-radius: 4px !important; /* pill → subtle rectangle */
    font-weight: 700 !important;
    background: rgba(229,57,53,0.07) !important;
    border: 1px solid rgba(229,57,53,0.18) !important;
    color: #C62828 !important;
}

.yi-sec-title {
    font-size: clamp(1.65rem, 2.8vw, 2.35rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.18 !important;
}

.yi-sec-sub {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #64748B !important;
}

.yi-sec-divider {
    width: 40px !important;
    height: 3px !important;
    background: #E53935 !important;
    border-radius: 2px !important;
    margin: 18px auto 0 !important;
}

/* ── NAVBAR ── */
#yi-navbar {
    border-bottom: 1px solid rgba(27,42,87,0.07) !important;
    background: #ffffff !important;
}

.yi-nav-inner {
    min-height: 60px !important;
    padding: 0 40px !important;
}

.yi-brand-logo {
    height: 38px !important;
}

.yi-brand-name {
    font-size: 16px !important;
    letter-spacing: 0.3px !important;
}

.yi-brand-tagline {
    font-size: 7.5px !important;
    letter-spacing: 3px !important;
}

.yi-navlinks li a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 6px 13px !important;
    letter-spacing: 0.1px !important;
}

    .yi-navlinks li a:hover {
        color: #1B2A57 !important;
    }

    .yi-navlinks li a::after {
        bottom: 1px !important;
        left: 13px !important;
        right: 13px !important;
        height: 2px !important;
        background: #E53935 !important;
        border-radius: 1px !important;
    }

/* Internship pill — refined */
.yi-nav-cta {
    font-size: 12.5px !important;
    padding: 8px 20px !important;
    border-radius: 6px !important; /* rectangular pill — more corporate */
    background: #E53935 !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(229,57,53,0.28) !important;
    letter-spacing: 0.2px !important;
    gap: 6px !important;
}

    .yi-nav-cta:hover {
        background: #C62828 !important;
        box-shadow: 0 4px 16px rgba(229,57,53,0.38) !important;
        transform: none !important;
    }

/* ── HERO ── */
#yi-hero {
    min-height: 88vh !important;
    background: linear-gradient(155deg, rgba(15,30,70,0.95) 0%, rgba(27,42,87,0.88) 40%, rgba(27,42,87,0.75) 70%, rgba(58,99,243,0.20) 100%), url('https://plus.unsplash.com/premium_photo-1661370129267-218cf5075c23?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center / cover no-repeat fixed !important;
}

.yi-hero-badge {
    background: rgba(58,99,243,0.15) !important;
    border-color: rgba(58,99,243,0.30) !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    padding: 6px 18px !important;
}

.yi-hero-h1 {
    font-size: clamp(2.2rem, 5.2vw, 3.75rem) !important;
    letter-spacing: -1.5px !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.20) !important;
}

    .yi-hero-h1 .yi-accent {
        color: #E53935 !important;
        font-style: italic !important;
    }

.yi-hero-sub {
    font-size: 16px !important;
    color: rgba(255,255,255,0.62) !important;
    max-width: 540px !important;
    line-height: 1.88 !important;
}

/* Hero CTA buttons — flat & rectangular (Accenture style) */
.yi-btn-primary {
    border-radius: 6px !important;
    font-size: 13.5px !important;
    padding: 13px 32px !important;
    background: #E53935 !important;
    box-shadow: 0 4px 18px rgba(229,57,53,0.38) !important;
    letter-spacing: 0.3px !important;
    gap: 9px !important;
}

    .yi-btn-primary:hover {
        background: #C62828 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 26px rgba(229,57,53,0.46) !important;
    }

.yi-btn-outline {
    border-radius: 6px !important;
    font-size: 13.5px !important;
    padding: 11px 30px !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    letter-spacing: 0.2px !important;
}

    .yi-btn-outline:hover {
        border-color: rgba(255,255,255,0.75) !important;
        background: rgba(255,255,255,0.09) !important;
        transform: translateY(-2px) !important;
    }

/* Hero stat pills */
.yi-hstat {
    border-radius: 10px !important;
    padding: 15px 22px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    min-width: 108px !important;
}

    .yi-hstat:hover {
        background: rgba(255,255,255,0.11) !important;
        transform: translateY(-3px) !important;
    }

.yi-hstat-num {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
}

    .yi-hstat-num sup {
        color: #E53935 !important;
        font-size: 13px !important;
    }

.yi-hstat-lbl {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
}

/* ── PRODUCTS SECTION ── */
#yi-products {
    background: var(--yi-white) !important;
}

.yi-prod-card {
    border-radius: 12px !important;
    border: 1px solid rgba(27,42,87,0.08) !important;
    padding: 34px 26px 28px !important;
    box-shadow: 0 2px 8px rgba(15,30,70,0.06), 0 6px 24px rgba(15,30,70,0.07) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

    .yi-prod-card:hover {
        transform: translateY(-7px) !important;
        box-shadow: 0 8px 24px rgba(15,30,70,0.12), 0 20px 56px rgba(15,30,70,0.14) !important;
        border-color: rgba(27,42,87,0.12) !important;
    }

    .yi-prod-card::before {
        height: 3px !important;
        background: #E53935 !important;
        border-radius: 0 !important;
    }

.yi-prod-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    font-size: 22px !important;
    margin-bottom: 20px !important;
}

.yi-ic-blue {
    background: rgba(27,42,87,0.08) !important;
    color: #1B2A57 !important;
}

.yi-ic-red {
    background: rgba(229,57,53,0.08) !important;
    color: #E53935 !important;
}

.yi-ic-teal {
    background: rgba(0,137,123,0.08) !important;
    color: #00897B !important;
}

.yi-prod-card:hover .yi-prod-icon {
    background: #1B2A57 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.yi-prod-card h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 10px !important;
}

.yi-prod-card p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    color: #64748B !important;
    margin-bottom: 24px !important;
}

.yi-prod-btn {
    border-radius: 5px !important;
    font-size: 12.5px !important;
    padding: 8px 20px !important;
    border: 1.5px solid rgba(27,42,87,0.22) !important;
    color: #1B2A57 !important;
    letter-spacing: 0.1px !important;
}

    .yi-prod-btn:hover {
        background: #1B2A57 !important;
        border-color: #1B2A57 !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: 0 4px 14px rgba(27,42,87,0.22) !important;
    }

/* ── ABOUT SECTION ── */
#yi-about {
    background: #F6F8FC !important;
}

.yi-about-feat {
    border-radius: 10px !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(27,42,87,0.07) !important;
    box-shadow: 0 1px 3px rgba(15,30,70,0.06), 0 3px 10px rgba(15,30,70,0.05) !important;
}

    .yi-about-feat:hover {
        transform: translateX(4px) !important;
        box-shadow: 0 2px 8px rgba(15,30,70,0.08), 0 6px 22px rgba(15,30,70,0.09) !important;
        border-color: rgba(27,42,87,0.12) !important;
    }

.yi-about-feat-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 9px !important;
    font-size: 16px !important;
}

    .yi-about-feat-icon.blue {
        border-left: 3px solid #1B2A57 !important;
        background: rgba(27,42,87,0.07) !important;
        color: #1B2A57 !important;
    }

    .yi-about-feat-icon.red {
        border-left: 3px solid #E53935 !important;
        background: rgba(229,57,53,0.07) !important;
        color: #E53935 !important;
    }

    .yi-about-feat-icon.teal {
        border-left: 3px solid #00897B !important;
        background: rgba(0,137,123,0.07) !important;
        color: #00897B !important;
    }

.yi-about-feat strong {
    font-size: 13px !important;
    color: #1E293B !important;
    font-weight: 700 !important;
}

.yi-about-feat span {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.58 !important;
}

/* About panel refinements */
.yi-about-panel {
    border-radius: 14px !important;
    padding: 44px 36px !important;
    background: linear-gradient(150deg, #0F1E46 0%, #1B2A57 55%, #22336B 100%) !important;
    box-shadow: 0 8px 24px rgba(15,30,70,0.18), 0 24px 60px rgba(15,30,70,0.22) !important;
}

.yi-about-panel-icon {
    color: rgba(229,57,53,0.38) !important;
    font-size: 52px !important;
}

.yi-about-panel-name {
    font-size: 1.2rem !important;
    letter-spacing: -0.2px !important;
}

.yi-about-panel-addr {
    font-size: 11.5px !important;
    color: rgba(255,255,255,0.30) !important;
    margin-bottom: 28px !important;
}

.yi-about-stat-box {
    border-radius: 10px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    padding: 18px 10px !important;
}

.yi-about-stat-num {
    font-size: 1.85rem !important;
    letter-spacing: -0.8px !important;
}

    .yi-about-stat-num sup {
        color: #E53935 !important;
        font-size: 0.85rem !important;
    }

.yi-about-stat-lbl {
    letter-spacing: 0.6px !important;
    font-size: 9.5px !important;
    color: rgba(255,255,255,0.32) !important;
}

/* ── SERVICES SECTION ── */
#yi-services {
    background: #0F1E46 !important;
}

    #yi-services .yi-sec-tag {
        background: rgba(255,255,255,0.07) !important;
        border-color: rgba(255,255,255,0.12) !important;
        color: rgba(255,255,255,0.55) !important;
        border-radius: 4px !important;
    }

    #yi-services .yi-sec-title {
        color: #ffffff !important;
        letter-spacing: -0.6px !important;
    }

        #yi-services .yi-sec-title span {
            color: #E53935 !important;
        }

    #yi-services .yi-sec-sub {
        color: rgba(255,255,255,0.42) !important;
    }

.yi-svc-card {
    border-radius: 12px !important;
    padding: 30px 16px 26px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

    .yi-svc-card:hover {
        background: rgba(255,255,255,0.08) !important;
        transform: translateY(-6px) !important;
        border-color: rgba(255,255,255,0.14) !important;
        box-shadow: 0 16px 48px rgba(0,0,0,0.28) !important;
    }

    .yi-svc-card::after {
        height: 2px !important;
        background: #E53935 !important;
        border-radius: 0 !important;
    }

.yi-svc-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    background: rgba(229,57,53,0.12) !important;
    color: #E53935 !important;
    margin-bottom: 16px !important;
}

.yi-svc-card:hover .yi-svc-icon {
    background: #E53935 !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.yi-svc-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.90) !important;
    letter-spacing: 0 !important;
    margin-bottom: 9px !important;
}

.yi-svc-desc {
    font-size: 11.5px !important;
    color: rgba(255,255,255,0.38) !important;
    line-height: 1.72 !important;
}

/* ── CLIENTS SECTION ── */
#yi-clients {
    background: #ffffff !important;
}

.yi-client-card {
    border-radius: 12px !important;
    border: 1px solid rgba(27,42,87,0.08) !important;
    box-shadow: 0 1px 3px rgba(15,30,70,0.06), 0 4px 14px rgba(15,30,70,0.06) !important;
    padding: 26px 18px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

    .yi-client-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 6px 20px rgba(15,30,70,0.11), 0 14px 40px rgba(15,30,70,0.10) !important;
        border-color: rgba(27,42,87,0.14) !important;
    }

.yi-client-icon-bg {
    border-radius: 10px !important;
    background: #F6F8FC !important;
    color: #1B2A57 !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 19px !important;
}

.yi-client-card:hover .yi-client-icon-bg {
    background: #1B2A57 !important;
    color: #ffffff !important;
}

.yi-client-logo {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #1B2A57 !important;
    letter-spacing: -0.2px !important;
}

    .yi-client-logo span {
        color: #E53935 !important;
    }

.yi-client-sector {
    font-size: 9.5px !important;
    letter-spacing: 1.3px !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
}

/* Slider arrows */
.yi-slider-arrow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important; /* square arrows — more corporate */
    border: 1.5px solid rgba(27,42,87,0.15) !important;
    color: #1B2A57 !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

    .yi-slider-arrow:hover:not(.disabled) {
        background: #1B2A57 !important;
        border-color: #1B2A57 !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: 0 4px 14px rgba(27,42,87,0.24) !important;
    }

.yi-sdot {
    width: 6px !important;
    height: 6px !important;
    background: #D6DCE8 !important;
    border-radius: 3px !important;
}

    .yi-sdot.active {
        background: #1B2A57 !important;
        width: 20px !important;
        border-radius: 3px !important;
    }

/* View All Clients */
.yi-btn-navy {
    border-radius: 6px !important;
    font-size: 13.5px !important;
    padding: 12px 34px !important;
    background: #1B2A57 !important;
    box-shadow: 0 4px 14px rgba(27,42,87,0.22) !important;
    letter-spacing: 0.2px !important;
}

    .yi-btn-navy:hover {
        background: #0F1E46 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(27,42,87,0.34) !important;
    }

/* ── NUMBERS / STATISTICS ── */
#yi-stats {
    background: linear-gradient(155deg, #0F1E46 0%, #1B2A57 50%, #1E3070 100%) !important;
}

    #yi-stats::before {
        background: radial-gradient(ellipse at 10% 60%, rgba(229,57,53,0.10) 0%, transparent 48%), radial-gradient(ellipse at 90% 40%, rgba(58,99,243,0.12) 0%, transparent 48%) !important;
    }

    #yi-stats::after {
        background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) !important;
        background-size: 28px 28px !important;
    }

    #yi-stats .yi-sec-title {
        letter-spacing: -0.6px !important;
    }

.yi-stats-grid {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.04) !important;
    gap: 1px !important;
}

.yi-stat-item {
    padding: 48px 20px !important;
    background: rgba(255,255,255,0.025) !important;
    transition: background 0.22s ease !important;
}

    .yi-stat-item:hover {
        background: rgba(255,255,255,0.07) !important;
    }

.yi-stat-icon {
    font-size: 26px !important;
    color: #E53935 !important;
    opacity: 0.80 !important;
    margin-bottom: 12px !important;
}

.yi-stat-num {
    font-size: clamp(2.3rem, 3.8vw, 3.3rem) !important;
    letter-spacing: -1.5px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}

    .yi-stat-num .yi-suffix {
        font-size: 0.48em !important;
        color: #E53935 !important;
        letter-spacing: 0 !important;
        font-weight: 700 !important;
    }

.yi-stat-label {
    font-size: 10.5px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.38) !important;
    font-weight: 600 !important;
}

/* ── FOOTER ── */
#yi-footer {
    background: #0B1230 !important;
    border-top: 2px solid #E53935 !important;
    padding-top: 68px !important;
}

.yi-footer-grid {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding-bottom: 52px !important;
    gap: 48px !important;
}

.yi-footer-brand-name {
    font-size: 17px !important;
    letter-spacing: 0.3px !important;
}

    .yi-footer-brand-name span {
        color: #E53935 !important;
    }

.yi-footer-desc {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.30) !important;
    line-height: 1.92 !important;
}

.yi-social-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.42) !important;
}

    .yi-social-btn:hover {
        background: #E53935 !important;
        border-color: #E53935 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(229,57,53,0.32) !important;
    }

.yi-footer-heading {
    font-size: 10px !important;
    letter-spacing: 2.2px !important;
    color: rgba(255,255,255,0.80) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
}

    .yi-footer-heading::after {
        width: 24px !important;
        height: 2px !important;
        background: #E53935 !important;
    }

.yi-footer-links {
    gap: 10px !important;
}

    .yi-footer-links li a {
        font-size: 12.5px !important;
        color: rgba(255,255,255,0.34) !important;
        gap: 8px !important;
        letter-spacing: 0.1px !important;
    }

        .yi-footer-links li a:hover {
            color: rgba(255,255,255,0.80) !important;
            transform: translateX(4px) !important;
        }

        .yi-footer-links li a i {
            color: #E53935 !important;
            font-size: 8.5px !important;
        }

.yi-fci-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    background: rgba(229,57,53,0.12) !important;
    color: #E53935 !important;
    font-size: 14px !important;
}

.yi-fci-label {
    font-size: 9px !important;
    letter-spacing: 1.6px !important;
    color: rgba(255,255,255,0.24) !important;
}

.yi-fci-value {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.60) !important;
    line-height: 1.65 !important;
}

    .yi-fci-value a {
        color: rgba(255,255,255,0.60) !important;
    }

        .yi-fci-value a:hover {
            color: rgba(255,255,255,0.90) !important;
        }

.yi-footer-bottom {
    padding: 20px 0 !important;
}

.yi-footer-copy {
    font-size: 11.5px !important;
    color: rgba(255,255,255,0.20) !important;
}

    .yi-footer-copy a {
        color: rgba(255,255,255,0.32) !important;
    }

.yi-footer-powered {
    font-size: 11.5px !important;
    color: rgba(255,255,255,0.18) !important;
}

    .yi-footer-powered a {
        color: rgba(255,255,255,0.30) !important;
    }

        .yi-footer-powered a:hover,
        .yi-footer-copy a:hover {
            color: #E53935 !important;
        }

/* ── BACK TO TOP ── */
#yi-back-top {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #1B2A57 !important;
    font-size: 16px !important;
    box-shadow: 0 4px 16px rgba(27,42,87,0.30) !important;
}

    #yi-back-top:hover {
        background: #E53935 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 22px rgba(229,57,53,0.36) !important;
    }

/* ── SECTION ALTERNATING BG for breathing room ── */
#yi-products {
    background: #ffffff !important;
}

#yi-about {
    background: #F6F8FC !important;
}

#yi-clients {
    background: #ffffff !important;
}

/* ── SECTION heading left-align fix for About ── */
#yi-about .yi-sec-head {
    text-align: left !important;
}

/* ── Smooth section transitions ── */
.yi-section {
    padding: 92px 0 !important;
}

/* Mobile nav refinements */
@media (max-width: 960px) {
    .yi-navlinks {
        border-top: 1px solid #EDF0F7 !important;
        box-shadow: 0 12px 32px rgba(15,30,70,0.12) !important;
    }

    .yi-nav-inner {
        padding: 0 20px !important;
        min-height: 58px !important;
    }
}

@media (max-width: 768px) {
    .yi-section {
        padding: 64px 0 !important;
    }

    .yi-stat-item {
        padding: 36px 14px !important;
    }

    .yi-about-panel {
        padding: 36px 28px !important;
    }
}

@media (max-width: 480px) {
    .yi-section {
        padding: 50px 0 !important;
    }

    .yi-nav-inner {
        padding: 0 16px !important;
    }

    .yi-hero-h1 {
        letter-spacing: -0.8px !important;
    }

    .yi-hero-sub {
        font-size: 14.5px !important;
    }
}

/* ============================================================
   SECTION — GET IN TOUCH  (#yi-contact)
   ============================================================ */
#yi-contact {
    background: var(--yi-light-bg) !important;
}

    #yi-contact .yi-sec-title span {
        color: var(--yi-blue) !important;
    }

/* Two-column grid: form left, info right */
.yi-contact-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 36px !important;
    align-items: start !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .yi-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* ── FORM CARD ── */
.yi-contact-form-wrap {
    min-width: 0 !important;
}

.yi-contact-form-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px 36px !important;
    box-shadow: 0 2px 8px rgba(15,30,70,0.07), 0 8px 32px rgba(15,30,70,0.09) !important;
    border: 1px solid rgba(27,42,87,0.08) !important;
}

@media (max-width: 560px) {
    .yi-contact-form-card {
        padding: 28px 20px !important;
    }
}

.yi-cf-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.3px !important;
}

.yi-cf-sub {
    font-size: 13.5px !important;
    color: #64748B !important;
    margin-bottom: 28px !important;
    line-height: 1.65 !important;
}

/* Two-column row inside form */
.yi-cf-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 560px) {
    .yi-cf-row {
        grid-template-columns: 1fr !important;
    }
}

.yi-cf-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.yi-cf-group-full {
    margin-bottom: 16px !important;
}

.yi-cf-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
}

/* Input wrapper with left icon */
.yi-cf-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.yi-cf-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 15px !important;
    color: #94A3B8 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: color 0.22s ease !important;
}

/* For textarea the icon sits at top */
.yi-cf-icon-top {
    top: 16px !important;
    transform: none !important;
}

.yi-cf-input {
    width: 100% !important;
    padding: 11px 14px 11px 40px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    background: #F6F8FC !important;
    border: 1.5px solid #D6DCE8 !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1.5 !important;
}

    .yi-cf-input:focus {
        border-color: #1B2A57 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(27,42,87,0.10) !important;
    }

        .yi-cf-input:focus + .yi-cf-icon,
        .yi-cf-input-wrap:focus-within .yi-cf-icon {
            color: #1B2A57 !important;
        }

    .yi-cf-input::placeholder {
        color: #B0BEC5 !important;
        font-size: 13px !important;
    }

/* Select arrow */
.yi-cf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

/* Textarea */
.yi-cf-textarea {
    resize: vertical !important;
    min-height: 130px !important;
    padding-top: 12px !important;
    align-self: flex-start !important;
}

/* Submit button */
.yi-cf-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #E53935 !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 13px 36px !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 16px rgba(229,57,53,0.32) !important;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
    margin-top: 8px !important;
    width: 100% !important;
    text-align: center !important;
}

    .yi-cf-submit:hover {
        background: #C62828 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(229,57,53,0.42) !important;
        color: #ffffff !important;
    }

    .yi-cf-submit:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px rgba(229,57,53,0.28) !important;
    }

.yi-cf-feedback {
    display: block !important;
    margin-top: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1B2A57 !important;
    text-align: center !important;
}

/* ── CONTACT INFO PANEL ── */
.yi-contact-info-wrap {
    min-width: 0 !important;
    background: linear-gradient(150deg, #0F1E46 0%, #1B2A57 60%, #22336B 100%) !important;
    border-radius: 16px !important;
    padding: 40px 36px !important;
    box-shadow: 0 8px 28px rgba(15,30,70,0.18), 0 20px 56px rgba(15,30,70,0.16) !important;
    position: relative !important;
    overflow: hidden !important;
}

    /* Decorative glow */
    .yi-contact-info-wrap::before {
        content: '' !important;
        position: absolute !important;
        top: -80px !important;
        right: -80px !important;
        width: 260px !important;
        height: 260px !important;
        background: radial-gradient(circle, rgba(229,57,53,0.14) 0%, transparent 68%) !important;
        pointer-events: none !important;
    }

    .yi-contact-info-wrap::after {
        content: '' !important;
        position: absolute !important;
        bottom: -60px !important;
        left: -60px !important;
        width: 200px !important;
        height: 200px !important;
        background: radial-gradient(circle, rgba(58,99,243,0.10) 0%, transparent 68%) !important;
        pointer-events: none !important;
    }

@media (max-width: 560px) {
    .yi-contact-info-wrap {
        padding: 28px 22px !important;
    }
}

/* Brand row */
.yi-ci-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    z-index: 1 !important;
    justify-content: center;
}

.yi-ci-logo {
    height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.yi-ci-company {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
}

.yi-ci-tagline {
    font-size: 10px !important;
    color: rgba(255,255,255,0.40) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

.yi-ci-intro {
    font-size: 13px !important;
    color: rgba(255,255,255,0.45) !important;
    line-height: 1.80 !important;
    margin-bottom: 30px !important;
    padding-bottom: 28px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Contact items */
.yi-ci-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    margin-bottom: 28px !important;
    position: relative !important;
    z-index: 1 !important;
}

.yi-ci-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.yi-ci-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    background: rgba(229,57,53,0.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    color: #E53935 !important;
    flex-shrink: 0 !important;
    transition: background 0.22s ease, color 0.22s ease !important;
}

.yi-ci-item:hover .yi-ci-icon-box {
    background: #E53935 !important;
    color: #ffffff !important;
}

.yi-ci-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding-top: 2px !important;
}

.yi-ci-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.32) !important;
}

.yi-ci-value {
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.72) !important;
    line-height: 1.65 !important;
    text-decoration: none !important;
    transition: color 0.20s ease !important;
    display: block !important;
}

a.yi-ci-value:hover {
    color: #ffffff !important;
}

/* Force phone/email links inside dark contact panel to stay white */
#yi-page .yi-contact-info-wrap a.yi-ci-value,
#yi-page .yi-contact-info-wrap a.yi-ci-value:visited,
#yi-page .yi-contact-info-wrap a.yi-ci-value:focus {
    color: rgba(255,255,255,0.72) !important;
}

    #yi-page .yi-contact-info-wrap a.yi-ci-value:hover {
        color: #ffffff !important;
    }

/* Business hours bar */
.yi-ci-hours {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    position: relative !important;
    z-index: 1 !important;
}

    .yi-ci-hours > i {
        font-size: 18px !important;
        color: rgba(229,57,53,0.80) !important;
        flex-shrink: 0 !important;
    }

.yi-ci-hours-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.32) !important;
    margin-bottom: 3px !important;
}

.yi-ci-hours-val {
    display: block !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.68) !important;
    font-weight: 500 !important;
}

.yi-cf-feedback-success {
    color: #1B6E3A !important;
    background: rgba(27,110,58,0.08) !important;
    border: 1px solid rgba(27,110,58,0.18) !important;
    border-radius: 7px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}

.yi-cf-feedback-error {
    color: #C62828 !important;
    background: rgba(198,40,40,0.07) !important;
    border: 1px solid rgba(198,40,40,0.18) !important;
    border-radius: 7px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}

/* ============================================================
   ABOUT STRIP SECTION — "Who We Are"
   ============================================================ */
.about-strip-section {
    padding: 96px 32px !important;
    background: #F6F8FC !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
}

/* ── Two-column flex layout (no Bootstrap dependency) ── */
.about-inner {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 60px !important;
    width: 100% !important;
}

.about-left-col {
    flex: 0 0 50% !important;
    min-width: 0 !important;
}

.about-right-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* ── Left column ── */
.about-text-block {
    padding-right: 0 !important;
}

.section-eyebrow {
    display: inline-block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
    color: #E53935 !important;
    background: rgba(229,57,53,0.08) !important;
    border: 1px solid rgba(229,57,53,0.20) !important;
    padding: 5px 18px !important;
    border-radius: 50px !important;
    margin-bottom: 18px !important;
}

.about-strip-section .section-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: #1B2A57 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 22px !important;
}

    .about-strip-section .section-title .text-red {
        color: #E53935 !important;
    }

.about-strip-section .section-body {
    font-size: 15.5px !important;
    color: #64748B !important;
    line-height: 1.85 !important;
    margin-bottom: 30px !important;
    font-weight: 400 !important;
}

/* Highlight bullet list */
.about-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 4px !important;
}

.highlight-item {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    color: #1E293B !important;
}

    .highlight-item i.fa-circle-check {
        color: #E53935 !important;
        font-size: 19px !important;
        flex-shrink: 0 !important;
    }

/* ── Right column: 2×2 card grid ── */
.about-visual-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.av-card {
    border-radius: 16px !important;
    padding: 28px 24px !important;
    transition: transform 0.26s ease, box-shadow 0.26s ease !important;
}

    .av-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 36px rgba(15,30,70,0.18) !important;
    }

.av-icon {
    font-size: 28px !important;
    display: block !important;
    margin-bottom: 14px !important;
}

.av-card h4 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    line-height: 1.3 !important;
}

.av-card p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Navy card */
.av-card--navy {
    background: #1B2A57 !important;
}

    .av-card--navy .av-icon {
        color: #E86363 !important;
    }

    .av-card--navy h4 {
        color: #ffffff !important;
    }

    .av-card--navy p {
        color: rgba(255,255,255,0.70) !important;
    }

/* Red card */
.av-card--red {
    background: #E53935 !important;
}

    .av-card--red .av-icon {
        color: #ffffff !important;
    }

    .av-card--red h4 {
        color: #ffffff !important;
    }

    .av-card--red p {
        color: rgba(255,255,255,0.88) !important;
    }

/* Light card */
.av-card--light {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
}

    .av-card--light .av-icon {
        color: #E53935 !important;
    }

    .av-card--light h4 {
        color: #1B2A57 !important;
    }

    .av-card--light p {
        color: #64748B !important;
    }

/* Dark card */
.av-card--dark {
    background: #1E293B !important;
}

    .av-card--dark .av-icon {
        color: #E86363 !important;
    }

    .av-card--dark h4 {
        color: #ffffff !important;
    }

    .av-card--dark p {
        color: rgba(255,255,255,0.70) !important;
    }

/* ── Responsive ── */
@media (max-width: 992px) {
    .about-inner {
        flex-direction: column !important;
        gap: 48px !important;
    }

    .about-left-col,
    .about-right-col {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .about-strip-section {
        padding: 64px 20px !important;
    }
}

@media (max-width: 480px) {
    .about-visual-grid {
        grid-template-columns: 1fr !important;
    }
}