/* ======================================================
   ROOT VARIABLES & GLOBAL TYPOGRAPHY
   ====================================================== */
    :root {
    /* Colors (from your existing setup) */
    --brand-red: #E30613;
    --brand-red-hover: #C50510;
    --text-dark: #111827;
    --text-muted: #4B5563;
    --bg-light: #F8F9FA;
    --white: #FFFFFF;
    --border-light: #E5E7EB;

    /* Typography & Sizes (newly added) */
    --text-xs: 0.85rem;
    --text-sm: 0.95rem;
    --text-base: 1rem;
    --h4-fluid: 1.1rem;
    --h3-fluid: 1.5rem;
    --h2-fluid: 2.5rem;

    /* Utilities (newly added) */
    --transition-speed: 0.3s;

    /* Typography System */
    --font-main: 'Inter', system-ui, sans-serif;
    
    /* Base Sizes */
    --text-base: 16px; /* Primary paragraphs/descriptions */
    --text-sm: 14px;   /* Card text, secondary info */
    --text-xs: 12px;   /* Badges, labels, micro-copy */
    
    /* Fluid Headings (Scales automatically desktop to mobile) */
    --h1-fluid: clamp(32px, 5vw, 60px); /* Hero / Final CTA */
    --h2-fluid: clamp(28px, 3.5vw, 42px); /* Standard Section Titles */
    --h3-fluid: clamp(18px, 2vw, 22px); /* Large Card Titles */
    --h4-fluid: clamp(14px, 1.5vw, 16px); /* Small Card/Feature Titles */
}

/* Apply font globally to these sections */
.managed-hero-section,
.premium-intro-section,
.included-services-section,
.unified-services-section,
.advantage-section,
.work-process-section,
.managed-cta-section,
.managed-testimonial-section,
.vciso-compact-section {
    font-family: var(--font-main);
}

/* ======================================================
   MANAGED IT HERO SECTION (LIGHT THEME)
   ====================================================== */
.managed-hero-section {
    position: relative;
    background-color: var(--bg-light);
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 5% 40px;
    overflow: hidden;
    z-index: 1;
}

.managed-hero-bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 75% 50%, rgba(227, 6, 19, 0.03) 0%, transparent 50%),
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
    z-index: -1;
    pointer-events: none;
}

.managed-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.m-hero-content {
    flex: 1.1;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.m-top-badge {
    display: flex;
    align-items: center;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.m-badge-line {
    width: 25px;
    height: 2px;
    background-color: var(--brand-red);
    margin-right: 12px;
}

.m-hero-title {
    color: var(--text-dark);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.m-hero-title .text-red {
    color: var(--brand-red);
}

.m-title-underline {
    width: 60px;
    height: 3px;
    background-color: var(--brand-red);
    margin-bottom: 25px;
    border-radius: 2px;
}

.m-hero-desc-wrapper {
    max-width: 580px;
    margin-bottom: 25px;
    text-align: justify;
}

.m-hero-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 15px 0;
}

.m-hero-desc:last-child {
    margin-bottom: 0;
}

/* Buttons */
.m-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.m-btn-primary {
    background-color: var(--brand-red);
    color: var(--white);
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.25);
    transition: all 0.3s ease;
    border: 2px solid var(--brand-red);
}

.m-btn-primary:hover {
    background-color: var(--brand-red-hover);
    border-color: var(--brand-red-hover);
    box-shadow: 0 12px 25px rgba(227, 6, 19, 0.35);
    transform: translateY(-2px);
}

.m-btn-outline {
    background-color: transparent;
    color: var(--brand-red);
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid rgba(227, 6, 19, 0.3);
    transition: all 0.3s ease;
}

.m-btn-outline:hover {
    border-color: var(--brand-red);
    background-color: rgba(227, 6, 19, 0.05);
}

.m-btn-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.3s;
}

.m-btn-primary:hover .m-btn-icon,
.m-btn-outline:hover .m-btn-icon {
    transform: translateX(4px);
}

/* Floating Breadcrumbs */
.m-breadcrumbs {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    gap: 10px;
}

.m-breadcrumbs a {
    color: var(--text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s;
}

.m-breadcrumbs a:hover {
    color: var(--brand-red);
}

.m-breadcrumbs svg {
    width: 16px;
    height: 16px;
    color: var(--brand-red);
}

.m-breadcrumbs .sep {
    color: #9CA3AF;
    font-size: var(--text-xs);
}

.m-breadcrumbs .current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
}

.m-breadcrumbs .current .dot {
    width: 6px;
    height: 6px;
    background-color: var(--brand-red);
    border-radius: 50%;
    display: inline-block;
}

.managed-it-services-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.managed-it-services-list li {
    margin-bottom: 12px;
}

.managed-it-services-list li a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    transition: color 0.3s ease;
}

.managed-it-services-list li a:hover {
    color: var(--brand-red);
    text-decoration: none;
}

.managed-it-services-list li a.active,
.managed-it-services-list li a:active {
    color: var(--text-dark);
    text-decoration: none;
}

.m-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.m-hero-visual img {
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    animation: floatImg 6s ease-in-out infinite; 
}

@keyframes floatImg {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.m-features-wrapper {
    max-width: 1400px;
    margin: 60px auto 0;
    width: 100%;
    position: relative;
    z-index: 3;
}

.m-features-strip {
    background: var(--white);
    border-radius: 20px;
    padding: 35px 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: center;
}

.m-feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.m-feature-item:not(:last-child) {
    border-right: 1px solid var(--border-light);
    padding-right: 20px;
}

.m-fi-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(227, 6, 19, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
    position: relative;
}

.m-fi-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.03);
}

.m-fi-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    z-index: 1;
}

.m-fi-icon .txt-icon {
    font-size: var(--text-sm);
    font-weight: 800;
    z-index: 1;
}

.m-fi-text h4 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.m-fi-text p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ======================================================
   PREMIUM INTRO SECTION
   ====================================================== */
.premium-intro-section {
    background-color: #FAFAFA;
    padding: 60px 5%; 
    position: relative;
    overflow: hidden;
    bottom:80px;
    z-index: 1;
}

.premium-intro-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.04) 0%, transparent 60%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.pi-container {
    max-width: 1400px;
    margin: 0 auto;
}

.pi-content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.pi-left {
    flex: 1;
    position: relative;
    z-index: 2;
}

.pi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFF0F2;
    color: var(--brand-red);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.pi-badge::before,
.pi-badge::after {
    content: '';
    width: 4px;
    height: 4px;
    background-color: var(--brand-red);
    border-radius: 50%;
}

.pi-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.pi-title-underline {
    width: 45px;
    height: 3px;
    background-color: var(--brand-red);
    border-radius: 2px;
    margin-bottom: 20px;
}

.pi-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 25px 0;
    max-width: 580px;
}

.pi-metrics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 25px;
    max-width: 580px;
}

.pi-metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pi-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFF0F2;
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pi-metric-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }

.pi-metric-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pi-metric-text strong {
    font-size: 18px; 
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.1;
}

.pi-metric-text span {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.pi-metric-divider {
    width: 1px;
    height: 35px;
    background-color: rgba(0,0,0,0.06);
}

.pi-right {
    flex: 1;
    position: relative;
    z-index: 2;
}

.pi-services-card {
    background: var(--white);
    border-radius: 20px;
    padding: 35px 35px 25px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
}

.pi-card-top-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-red);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 15px rgba(227, 6, 19, 0.25);
    white-space: nowrap;
}

.pi-card-top-badge svg { width: 14px; height: 14px; stroke-width: 2; }

.pi-card-title {
    color: var(--text-dark);
    font-size: var(--h3-fluid); 
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.pi-card-desc {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.pi-modern-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pi-modern-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #F8F9FA;
    border-radius: 10px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.pi-modern-list li:hover {
    background: #F1F3F5;
    transform: translateX(4px);
}

.pi-list-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pi-list-icon {
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pi-list-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }

.pi-list-text {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-dark);
}

.pi-list-check {
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pi-list-check svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* ======================================================
   BASE & LAYOUT
   ====================================================== */
.sl-srv-section {
    background-color: var(--white);
    padding: 100px 5%;
    font-family: inherit;
    /* Removed position, z-index, and overflow to prevent the stacking context trap */
}

.sl-srv-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.sl-srv-main-split {
    display: flex;
    gap: 60px;
    align-items: stretch;
}

/* ======================================================
   LEFT COLUMN (Content)
   ====================================================== */
.sl-srv-left {
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
}

.sl-srv-label {
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.sl-srv-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.sl-srv-title .text-red {
    color: var(--brand-red);
}

.sl-srv-title-underline {
    width: 50px;
    height: 3px;
    background-color: var(--brand-red);
    margin-bottom: 25px;
    border-radius: 2px;
}

.sl-srv-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 35px 0;
}

.sl-srv-callout {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 40px;
}

.sl-srv-callout-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.05);
    border: 1px solid rgba(227, 6, 19, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
}
.sl-srv-callout-icon svg { width: 22px; height: 22px; stroke-width: 2; }

.sl-srv-callout-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 700;
    margin: 0;
}
.sl-srv-callout-text .text-red { color: var(--brand-red); }

.sl-srv-image-wrapper {
    margin-top: auto; 
    text-align: center;
}
.sl-srv-image-wrapper img {
    width: 100%;
    max-width: 140px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.08));
}

/* ======================================================
   RIGHT COLUMN (Grid)
   ====================================================== */
.sl-srv-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sl-srv-right-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.sl-srv-right-header::before {
    content: '';
    width: 3px;
    height: 20px;
    background-color: var(--brand-red);
    border-radius: 2px;
}

.sl-srv-right-header h3 {
    margin: 0;
    font-size: var(--h3-fluid);
    font-weight: 800;
    color: var(--text-dark);
}

.sl-srv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sl-srv-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.sl-srv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(227, 6, 19, 0.08);
    border-color: rgba(227, 6, 19, 0.3);
}

.sl-srv-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.03);
    border: 1px solid rgba(227, 6, 19, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    margin-bottom: 20px;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}
.sl-srv-card:hover .sl-srv-card-icon {
    background-color: var(--brand-red);
    color: var(--white);
}
.sl-srv-card-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }

.sl-srv-card h4 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    line-height: 1.4;
    min-height: 40px; 
}

.sl-srv-card-divider {
    width: 25px;
    height: 2px;
    background-color: var(--brand-red);
    margin-bottom: 15px;
    border-radius: 2px;
    transition: width var(--transition-speed) ease;
}
.sl-srv-card:hover .sl-srv-card-divider { width: 50px; }

.sl-srv-explore {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-red);
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-speed) ease;
}
.sl-srv-explore svg { width: 14px; height: 14px; stroke-width: 2; }
.sl-srv-card:hover .sl-srv-explore {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================================
   BOTTOM STRIP
   ====================================================== */
.sl-srv-bottom-strip {
    background: var(--white);
    border-radius: 16px;
    padding: 30px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: center;
}

.sl-srv-bs-item { display: flex; align-items: center; gap: 15px; }
.sl-srv-bs-item:not(:last-child) { border-right: 1px solid var(--border-light); padding-right: 20px; }

.sl-srv-bs-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.05);
    border: 1px solid rgba(227, 6, 19, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
}
.sl-srv-bs-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }

.sl-srv-bs-text h4 { font-size: var(--h4-fluid); font-weight: 800; color: var(--text-dark); margin: 0 0 4px 0; }
.sl-srv-bs-text p { font-size: var(--text-xs); color: var(--text-muted); margin: 0; line-height: 1.4; }


.sl-srv-drawer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 999998; /* Maximized */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.sl-srv-drawer {
    position: fixed;
    top: 0; right: -500px;
    width: 100%;
    max-width: 450px;
    height: 100vh;
    background: var(--white);
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
    z-index: 999999; /* Maximized */
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sl-srv-drawer.active {
    right: 0;
}

.sl-srv-drawer-close {
    position: absolute;
    top: 25px; right: 25px;
    background: var(--bg-light);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dark);
    transition: background 0.3s ease, color 0.3s ease;
}
.sl-srv-drawer-close:hover {
    background: var(--brand-red); color: var(--white);
}
.sl-srv-drawer-close svg { width: 20px; height: 20px; stroke-width: 2; }

.sl-srv-drawer-header {
    padding: 60px 40px 30px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
}
.sl-srv-drawer-icon {
    width: 60px; height: 60px;
    border-radius: 12px;
    background: var(--brand-red);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(227, 6, 19, 0.2);
}
.sl-srv-drawer-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }

.sl-srv-drawer-header h2 {
    font-size: var(--h3-fluid);
    color: var(--text-dark);
    margin: 0;
    font-weight: 900;
    line-height: 1.3;
}

.sl-srv-drawer-content {
    padding: 40px;
    overflow-y: auto;
    flex: 1;
}

.sl-srv-drawer-desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0 0 30px 0;
}

.sl-srv-benefits-box h4 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(227, 6, 19, 0.1);
}

.sl-srv-benefits-list {
    list-style: none;
    padding: 0; margin: 0;
}

.sl-srv-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.5;
}

.sl-srv-benefits-list li svg {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--brand-red);
    margin-top: 2px;
}

.sl-srv-drawer-footer {
    padding: 30px 40px;
    background: var(--white);
    border-top: 1px solid var(--border-light);
}

.sl-srv-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--brand-red);
    color: var(--white);
    padding: 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease;
}
.sl-srv-btn:hover { background: #c00510; }

/* ======================================================
   RESPONSIVE (Mobile First Integration)
   ====================================================== */
@media (max-width: 1200px) {
    .sl-srv-grid { grid-template-columns: repeat(3, 1fr); }
    .sl-srv-bottom-strip { grid-template-columns: repeat(2, 1fr); }
    .sl-srv-bs-item:nth-child(2) { border-right: none; padding-right: 0; }
}

@media (max-width: 1024px) {
    .sl-srv-main-split { flex-direction: column; gap: 40px; }
    .sl-srv-left { flex: none; width: 100%; max-width: 600px; margin: 0 auto; text-align: center; }
    .sl-srv-title-underline { margin: 0 auto 25px auto; }
    .sl-srv-callout { text-align: left; }
}

@media (max-width: 768px) {
    .sl-srv-grid { grid-template-columns: repeat(2, 1fr); }
    .sl-srv-section { padding: 60px 5%; }
}

@media (max-width: 576px) {
    .sl-srv-grid { grid-template-columns: 1fr; }
    .sl-srv-bottom-strip { grid-template-columns: 1fr; gap: 20px; padding: 25px; }
    .sl-srv-bs-item { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
    .sl-srv-bs-item:last-child { border-bottom: none; padding-bottom: 0; }
    .sl-srv-drawer-header, .sl-srv-drawer-content, .sl-srv-drawer-footer { padding: 30px 25px; }
}

/* ======================================================
   INDUSTRIES & WHY CHOOSE US
   ====================================================== */
.unified-services-section {
    background-color: var(--bg-light); /* Changed to var for safety */
    padding: 100px 5%;
    position: relative;
}

.uss-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ind-split {
    display: flex;
    gap: 50px;
    align-items: stretch;
}

.ind-left {
    flex: 1.1;
    display: flex;
    flex-direction: column;
}

.uss-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.uss-label-line {
    width: 25px;
    height: 2px;
    background-color: var(--brand-red);
}

.ind-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.uss-title-underline {
    width: 45px;
    height: 3px;
    background-color: var(--brand-red);
    margin-bottom: 25px;
    border-radius: 2px;
}

.ind-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 30px 0;
    max-width: 600px;
}

.ind-subhead {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 20px 0;
}

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

.ind-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ind-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    border-color: rgba(227, 6, 19, 0.2);
}

.ind-icon {
    width: 40px;
    height: 40px;
    color: var(--brand-red);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ind-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }

.ind-card h4 {
    font-size: var(--text-xs); /* Kept slightly smaller for density */
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.4;
}

.ind-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ind-image-box {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    flex-grow: 1;
    display: flex;
}

.ind-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind-callout {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid var(--border-light);
}

.callout-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(227, 6, 19, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
}

.callout-icon svg { width: 22px; height: 22px; stroke-width: 2; }

.ind-callout p {
    font-size: var(--text-sm);
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* Unified Box */
.wcu-unified-box {
    background: var(--white);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: stretch;
    gap: 50px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
}

.wcu-left {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
}

.wcu-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.wcu-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0;
}

.wcu-divider {
    width: 1px;
    background-color: var(--border-light);
    flex-shrink: 0;
}

.wcu-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.wcu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
    width: 100%;
}

.wcu-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.wf-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.04);
    border: 1px solid rgba(227, 6, 19, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
}

.wf-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.wf-text {
    display: flex;
    flex-direction: column;
}

.wf-text h4 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.wf-text p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ======================================================
   ADVANTAGE SECTION
   ====================================================== */
.advantage-section {
    background-color: var(--bg-light);
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.advantage-section::before,
.advantage-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
    background-image: radial-gradient(rgba(0,0,0,0.04) 2px, transparent 2px);
    background-size: 15px 15px;
    z-index: -1;
    pointer-events: none;
}
.advantage-section::before {
    left: 0;
    mask-image: linear-gradient(to right, rgba(0,0,0,1), transparent);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), transparent);
}
.advantage-section::after {
    right: 0;
    mask-image: linear-gradient(to left, rgba(0,0,0,1), transparent);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), transparent);
}

.adv-container {
    max-width: 1400px;
    margin: 0 auto;
}

.adv-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adv-label {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.adv-line {
    width: 40px;
    height: 2px;
    background-color: var(--brand-red);
}

.adv-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -1px;
}

.adv-title .text-red {
    color: var(--brand-red);
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.adv-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    border-color: rgba(227, 6, 19, 0.1);
}

.adv-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--white) 0%, rgba(227, 6, 19, 0.1) 60%, rgba(227, 6, 19, 0.2) 100%);
    border: 1px solid rgba(227, 6, 19, 0.1);
    box-shadow: 0 10px 20px rgba(227, 6, 19, 0.15), inset 0 2px 5px rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    margin-bottom: 25px;
}

.adv-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    fill: var(--brand-red);
    stroke: var(--brand-red);
}

.adv-icon .outline-icon {
    fill: none;
}

.adv-card h3 {
    font-size: var(--h3-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 15px 0;
}

.adv-divider {
    width: 25px;
    height: 2px;
    background-color: var(--brand-red);
    margin-bottom: 20px;
    border-radius: 2px;
}

.adv-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ================= PDPL SERVICES UNIQUE SECTION - NO BLANK DESIGN ================= */

.pdpl-services-showcase {
position: relative;
padding: 90px 5%;
background: linear-gradient(135deg, #fff 0%, #fff7f8 45%, #f8f9fb 100%);
overflow: hidden;
}

.pdpl-services-showcase::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 320px;
height: 320px;
background: rgba(227, 6, 19, 0.08);
border-radius: 50%;
pointer-events: none;
}

.pdpl-services-showcase::after {
content: "";
position: absolute;
bottom: -100px;
left: -100px;
width: 260px;
height: 260px;
background: rgba(227, 6, 19, 0.06);
border-radius: 50%;
pointer-events: none;
}

.pdpl-services-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.pdpl-services-layout {
display: block;
}

.pdpl-services-left {
background: #ffffff;
border: 1px solid rgba(227, 6, 19, 0.12);
border-radius: 28px;
padding: 45px 50px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
margin-bottom: 40px;
position: relative;
overflow: hidden;
}

.pdpl-services-left::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 7px;
height: 100%;
background: #E30613;
}

.pdpl-services-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #E30613;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 18px;
}

.pdpl-services-label span {
width: 34px;
height: 2px;
background: #E30613;
display: inline-block;
}

.pdpl-services-title {
font-size: 42px;
line-height: 1.18;
color: #111827;
font-weight: 900;
margin: 0 0 18px 0;
}

.pdpl-services-title .text-red {
color: #E30613;
}

.pdpl-services-desc {
font-size: 16px;
line-height: 1.8;
color: #4b5563;
margin: 0 0 14px 0;
max-width: 1050px;
text-align: justify;
}

.pdpl-services-highlight-box {
margin-top: 26px;
background: #111827;
color: #ffffff;
padding: 24px 28px;
border-radius: 18px;
position: relative;
overflow: hidden;
max-width: 900px;
}

.pdpl-services-highlight-box::before {
content: "";
position: absolute;
right: -45px;
top: -45px;
width: 110px;
height: 110px;
background: rgba(227, 6, 19, 0.45);
border-radius: 50%;
}

.pdpl-services-highlight-box h3 {
font-size: 18px;
margin: 0 0 10px 0;
color: #ffffff;
position: relative;
z-index: 2;
}

.pdpl-services-highlight-box p {
font-size: 14px;
line-height: 1.7;
color: #e5e7eb;
margin: 0;
position: relative;
z-index: 2;
}

.pdpl-services-right {
width: 100%;
}

.pdpl-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.pdpl-service-item {
background: #ffffff;
border-radius: 22px;
padding: 28px;
border: 1px solid rgba(17, 24, 39, 0.08);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
min-height: 210px;
}

.pdpl-service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: #E30613;
opacity: 0;
transition: all 0.35s ease;
}

.pdpl-service-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 55px rgba(227, 6, 19, 0.12);
border-color: rgba(227, 6, 19, 0.25);
}

.pdpl-service-item:hover::before {
opacity: 1;
}

.pdpl-service-top {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}

.pdpl-service-num {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(227, 6, 19, 0.10);
color: #E30613;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 15px;
flex-shrink: 0;
}

.pdpl-service-item h3 {
font-size: 19px;
line-height: 1.35;
color: #111827;
font-weight: 900;
margin: 0;
}

.pdpl-service-item p {
font-size: 15px;
line-height: 1.75;
color: #4b5563;
margin: 0;
}

.pdpl-services-cta {
margin-top: 38px;
display: flex;
justify-content: center;
}

.pdpl-services-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #E30613;
color: #ffffff;
padding: 15px 30px;
border-radius: 50px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}

.pdpl-services-btn:hover {
background: #b90510;
color: #ffffff;
transform: translateY(-3px);
}

@media (max-width: 1100px) {
.pdpl-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 767px) {
.pdpl-services-showcase {
padding: 60px 5%;
}

.pdpl-services-left {
    padding: 34px 26px;
}

.pdpl-services-title {
    font-size: 30px;
}

.pdpl-services-grid {
    grid-template-columns: 1fr;
}

.pdpl-service-item {
    min-height: auto;
}

}



/* ======================================================
   WORK PROCESS SECTION
   ====================================================== */
.work-process-section {
    background-color: var(--bg-light);
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.wp-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(circle at center, transparent 30%, black 90%);
    -webkit-mask-image: radial-gradient(circle at center, transparent 30%, black 90%);
    z-index: -1;
    pointer-events: none;
}

.wp-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.wp-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.wp-label {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.wp-label-line {
    width: 30px;
    height: 2px;
    background-color: var(--brand-red);
}

.wp-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.wp-title .text-red {
    color: var(--brand-red);
}

.wp-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0;
}

.wp-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.wp-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 15px;
}

.wp-step:not(:last-child) .wp-connector {
    position: absolute;
    top: 55px; 
    left: 50%;
    width: 100%;
    border-top: 2px dotted #D1D5DB;
    z-index: 1;
}

.wp-connector-icon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    border-radius: 50%;
}
.wp-connector-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

.wp-bg-num {
    position: absolute;
    top: -15px;
    left: 20%;
    font-size: 65px;
    font-weight: 900;
    color: #F3F4F6;
    line-height: 1;
    z-index: 0;
    user-select: none;
}

.wp-icon-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    z-index: 2;
    transition: transform 0.4s ease;
}

.wp-step:hover .wp-icon-wrapper {
    transform: translateY(-5px);
}

.wp-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--brand-red);
    border-right-color: var(--brand-red);
    transform: rotate(15deg);
    transition: transform 0.5s ease;
}

.wp-step:hover .wp-icon-wrapper::after {
    transform: rotate(195deg);
}

.wp-icon-wrapper svg {
    width: 45px;
    height: 45px;
    stroke-width: 1.5;
}

.wp-icon-dark { stroke: #111827; fill: none; }
.wp-icon-red { stroke: #E30613; fill: none; }

.wp-step h3 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    line-height: 1.4;
    min-height: 45px; 
}

.wp-step p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.wp-bottom-strip {
    background: var(--white);
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    border: 1px solid var(--border-light);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: center;
}

.wp-bs-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wp-bs-item:not(:last-child) {
    border-right: 1px solid var(--border-light);
    padding-right: 20px;
}

.wp-bs-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(227, 6, 19, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    flex-shrink: 0;
    background: rgba(227, 6, 19, 0.02);
}

.wp-bs-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.wp-bs-text h4 {
    font-size: var(--h4-fluid);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 5px 0;
}

.wp-bs-text p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ======================================================
   CTA SECTION
   ====================================================== */
.managed-cta-section {
    background-color: var(--bg-light);
    padding: 100px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-box {
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    max-width: 1400px; 
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 70px 80px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 85% 15%, rgba(227, 6, 19, 0.04) 0%, transparent 50%),
        radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px;
    z-index: 0;
    pointer-events: none;
}

.cta-content {
    flex: 1.2;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cta-label-arrows {
    font-weight: 900;
    letter-spacing: 0;
}

.cta-title {
    color: var(--text-dark);
    font-size: 46px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.cta-title .text-red {
    color: var(--brand-red);
}

.cta-title-underline {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 25px;
}

.cta-line-long { width: 45px; height: 3px; background: var(--brand-red); border-radius: 2px; }
.cta-line-dot { width: 5px; height: 5px; background: var(--brand-red); border-radius: 50%; }

.cta-desc {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0 0 45px 0;
    max-width: 600px;
}

.cta-features {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.cta-feat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    width: 85px; 
}

.cta-feat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red);
    border: 1px solid rgba(227, 6, 19, 0.05);
    transition: transform 0.3s ease;
}

.cta-feat-item:hover .cta-feat-icon {
    transform: translateY(-4px);
}
.cta-feat-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }

.cta-feat-item span {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
}

.managed-cta-section .cta-btn {
    background: linear-gradient(90deg, #E30613 0%, #B30000 100%) !important;
    background-color: #E30613 !important;
    border-radius: 50px !important;
    padding: 8px 25px 8px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(227, 6, 19, 0.3) !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    width: fit-content;
}

.managed-cta-section .cta-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(227, 6, 19, 0.4) !important;
}

.managed-cta-section .cta-btn-icon-circle {
    width: 45px !important;
    height: 45px !important;
    background: var(--white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E30613 !important;
    flex-shrink: 0 !important;
}

.managed-cta-section .cta-btn-icon-circle svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; }

.managed-cta-section .cta-btn-text {
    color: var(--white) !important;
    font-size: var(--text-base) !important;
    font-weight: 700 !important;
    padding: 0 20px !important;
    letter-spacing: 0.5px !important;
}

.managed-cta-section .cta-btn-divider {
    width: 1px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    margin: 0 15px 0 0 !important;
}

.managed-cta-section .cta-btn-arrow {
    color: var(--white) !important;
    display: flex !important;
    align-items: center !important;
    transition: transform 0.3s ease !important;
}

.managed-cta-section .cta-btn:hover .cta-btn-arrow {
    transform: translateX(5px) !important;
}
.managed-cta-section .cta-btn-arrow svg { width: 20px !important; height: 20px !important; stroke-width: 2.5 !important; }

.cta-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cta-visual img {
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
    animation: ctaFloat 6s ease-in-out infinite;
}

@keyframes ctaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ======================================================
   TESTIMONIAL SECTION
   ====================================================== */
.managed-testimonial-section {
    background-color: var(--white);
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

.testi-container {
    max-width: 1400px;
    margin: 0 auto;
}

.testi-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testi-label-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.testi-line-dot {
    display: flex;
    align-items: center;
}
.testi-line-dot.left::before { content: ''; width: 30px; height: 2px; background: var(--brand-red); opacity: 0.8; }
.testi-line-dot.right::after { content: ''; width: 30px; height: 2px; background: var(--brand-red); opacity: 0.8; }

.testi-label {
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.testi-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -1px;
}
.testi-title .text-red {
    color: var(--brand-red);
}

.testi-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testi-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    padding-bottom: 30px; 
    scroll-behavior: smooth;
    cursor: grab;
}
.testi-track:active {
    cursor: grabbing;
}
.testi-track::-webkit-scrollbar {
    display: none;
}

.testi-card {
    flex: 0 0 calc(33.333% - 20px); 
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.quote-top-left {
    color: var(--brand-red);
    width: 32px;
    height: 32px;
    margin-bottom: 25px;
}

.quote-watermark {
    position: absolute;
    top: 30px;
    right: 30px;
    color: rgba(227, 6, 19, 0.05);
    width: 80px;
    height: 80px;
    z-index: 0;
}

.testi-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0 0 35px 0;
    position: relative;
    z-index: 2;
    flex-grow: 1; 
    font-style: italic;
}

.testi-divider {
    height: 1px;
    background: var(--border-light);
    border: none;
    margin: 0 0 25px 0;
    width: 100%;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.05);
    border: 1px solid rgba(227, 6, 19, 0.1);
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: var(--text-base);
}
.author-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
}

.author-role {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-red);
    margin: 0;
}

.testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

.testi-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.testi-btn:hover {
    background: var(--brand-red);
    color: var(--white);
    border-color: var(--brand-red);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.2);
}
.testi-btn svg { width: 20px; height: 20px; stroke-width: 2.5; }

.testi-progress {
    width: 200px;
    height: 4px;
    background: var(--border-light);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.testi-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--brand-red);
    border-radius: 4px;
    transition: left 0.3s ease, width 0.3s ease;
}

/* ======================================================
   vCISO EXECUTIVE OVERVIEW
   ====================================================== */
.vciso-compact-section {
    background-color: var(--white);
    padding: 60px 5%; 
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.vciso-particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(227, 6, 19, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(17, 24, 39, 0.02) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e30613' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: particleDrift 40s linear infinite;
    pointer-events: none;
}

@keyframes particleDrift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 120px 120px; }
}

.vo-compact-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.vo-compact-image {
    flex: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.vo-compact-image img {
    width: 100%;
    max-width: 620px; 
    height: auto;
    object-fit: contain;
    mix-blend-mode: darken; 
    animation: compactFloat 5s ease-in-out infinite;
}

@keyframes compactFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.vo-compact-content {
    flex: 1.2;
    display: flex;
    flex-direction: column;
}

.vo-compact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-red);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.vo-compact-badge::before {
    content: '';
    width: 25px;
    height: 2px;
    background-color: var(--brand-red);
}

.vo-compact-title {
    color: var(--text-dark);
    font-size: var(--h2-fluid);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.vo-compact-lead {
    font-size: var(--text-base);
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 15px 0;
    padding-left: 18px;
    border-left: 3px solid var(--brand-red);
}

.vo-compact-text {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0 0 12px 0;
    text-align: justify;
}

.vo-compact-text:last-child {
    margin-bottom: 0;
}

/* ======================================================
   SCROLL ENTRANCE ANIMATIONS
   ====================================================== */
[data-anim] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-down"]  { transform: translateY(-30px); }
[data-anim="fade-left"]  { transform: translateX(-40px); }
[data-anim="fade-right"] { transform: translateX(40px); }
[data-anim="fade-in"]    { transform: scale(0.96); }
[data-anim="zoom-in"]    { transform: scale(0.88); }

[data-anim].anim-visible {
    opacity: 1;
    transform: none;
}

[data-anim-delay="1"] { transition-delay: 0.1s; }
[data-anim-delay="2"] { transition-delay: 0.2s; }
[data-anim-delay="3"] { transition-delay: 0.3s; }
[data-anim-delay="4"] { transition-delay: 0.4s; }
[data-anim-delay="5"] { transition-delay: 0.5s; }
[data-anim-delay="6"] { transition-delay: 0.6s; }
[data-anim-delay="7"] { transition-delay: 0.7s; }
[data-anim-delay="8"] { transition-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ======================================================
   RESPONSIVE MEDIA QUERIES (CONSOLIDATED)
   ====================================================== */
@media (max-width: 1400px) {
    .inc-main-split { gap: 40px; }
    .inc-left { flex: 0 0 350px; }
    .inc-services-grid { gap: 15px; }
    .inc-card { padding: 25px 15px; }
}

@media (max-width: 1200px) {
    .inc-services-grid { grid-template-columns: repeat(2, 1fr); }
    .inc-card h4 { min-height: auto; }
    .inc-bottom-strip { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .inc-bs-item:nth-child(2) { border-right: none; padding-right: 0; }
    .inc-bs-item:nth-child(1), .inc-bs-item:nth-child(2) { border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
    .ind-split { flex-direction: column; gap: 40px; }
    .ind-right { order: -1; } 
    .ind-image-box { min-height: 400px; }
    .wcu-unified-box { padding: 40px; gap: 30px; }
    .wcu-left { flex: 0 0 300px; }
    .wp-bottom-strip { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .wp-bs-item:not(:last-child) { border-right: none; padding-right: 0; }
    .wp-bs-item:nth-child(odd) { border-right: 1px solid var(--border-light); padding-right: 20px; }
    .wp-bs-item:nth-child(1), .wp-bs-item:nth-child(2) { border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
    .cta-box { padding: 60px 40px; gap: 40px; }
    .cta-features { gap: 20px; }
}

@media (max-width: 1100px) {
    .m-features-strip { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .m-feature-item:not(:last-child) { border-right: none; padding-right: 0; }
    .m-feature-item:nth-child(odd) { border-right: 1px solid var(--border-light); padding-right: 20px; }
    .pi-content-wrapper { flex-direction: column; gap: 50px; }
    .pi-left, .pi-right { width: 100%; }
    .pi-desc { max-width: 100%; }
    .pi-metrics-row { max-width: 100%; }
    .adv-grid { grid-template-columns: repeat(2, 1fr); }
    .advantage-section::before, .advantage-section::after { display: none; }
    .testi-card { flex: 0 0 calc(50% - 15px); }
}

@media (max-width: 992px) {
    .managed-hero-container { flex-direction: column; text-align: center; gap: 40px; }
    .m-hero-content { align-items: center; max-width: 100%; }
    .m-hero-desc-wrapper { margin-left: auto; margin-right: auto; text-align: justify; }
    .m-hero-actions { justify-content: center; }
    .m-hero-visual { width: 100%; margin-top: 20px; }
    .inc-main-split { flex-direction: column; }
    .inc-left { flex: none; width: 100%; max-width: 700px; margin: 0 auto; text-align: center; }
    .inc-title-underline { margin: 0 auto 25px; }
    .inc-callout { text-align: left; max-width: 600px; margin: 0 auto 40px; }
    .ind-grid { grid-template-columns: repeat(3, 1fr); }
    .wcu-unified-box { flex-direction: column; align-items: flex-start; }
    .wcu-left { flex: none; width: 100%; }
    .wcu-divider { width: 100%; height: 1px; margin: 10px 0; }
    .wcu-title br { display: none; }
    .wp-timeline { flex-direction: column; gap: 50px; }
    .wp-step:not(:last-child) .wp-connector { display: none; }
    .wp-bg-num { left: 50%; transform: translateX(-110px); }
    .wp-step h3 { min-height: auto; }
    .cta-box { flex-direction: column; text-align: center; }
    .cta-content { align-items: center; }
    .cta-desc { text-align: center; margin-left: auto; margin-right: auto; }
    .cta-features { justify-content: center; }
    .cta-title-underline { justify-content: center; }
    .vo-compact-container { flex-direction: column; gap: 35px; text-align: center; }
    .vo-compact-content { align-items: center; }
    .vo-compact-lead { text-align: left; border-left: none; border-top: 3px solid var(--brand-red); padding: 15px 0 0 0; }
    .vo-compact-text { text-align: center; }
}

@media (max-width: 768px) {
    .managed-hero-section { padding: 100px 5% 50px; }
    .m-features-strip { grid-template-columns: 1fr; padding: 30px 25px; }
    .m-feature-item:nth-child(odd) { border-right: none; padding-right: 0; }
    .m-feature-item:not(:last-child) { border-bottom: 1px solid var(--border-light); padding-bottom: 20px; }
    .m-breadcrumbs { flex-wrap: wrap; justify-content: center; }
    .premium-intro-section { padding: 60px 5%; }
    .pi-metrics-row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .pi-metric-divider { width: 100%; height: 1px; }
    .pi-services-card { padding: 35px 20px 20px; }
    .pi-modern-list li { padding: 12px 15px; }
    .pi-list-text { font-size: var(--text-xs); }
    .inc-services-grid { grid-template-columns: 1fr; }
    .inc-bottom-strip { grid-template-columns: 1fr; padding: 30px 25px; gap: 0; }
    .inc-bs-item { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-light); padding: 20px 0; }
    .inc-bs-item:first-child { padding-top: 0; }
    .inc-bs-item:last-child { border-bottom: none; padding-bottom: 0; }
    .inc-callout { flex-direction: column; text-align: center; }
    .unified-services-section { padding: 60px 5%; }
    .ind-image-box { min-height: 250px; }
    .ind-grid { grid-template-columns: repeat(2, 1fr); }
    .wcu-unified-box { padding: 30px 20px; }
    .wcu-grid { grid-template-columns: 1fr; gap: 30px; }
    .advantage-section { padding: 80px 5%; }
    .adv-grid { grid-template-columns: 1fr; }
    .adv-card { padding: 35px 25px; }
    .adv-line { width: 25px; }
    .work-process-section { padding: 80px 5%; }
    .wp-bottom-strip { grid-template-columns: 1fr; padding: 30px 20px; }
    .wp-bs-item { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-light); padding-bottom: 20px !important; }
    .wp-bs-item:first-child { padding-top: 0; }
    .wp-bs-item:last-child { border-bottom: none; padding-bottom: 0 !important; }
    .managed-cta-section { padding: 80px 5%; }
    .cta-box { padding: 40px 25px; border-radius: 20px; }
    .cta-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; width: 100%; }
    .cta-feat-item { width: 100%; }
    .managed-cta-section .cta-btn { width: 100% !important; justify-content: space-between !important; padding: 8px 20px 8px 8px !important; }
    .managed-testimonial-section { padding: 80px 5%; }
    .testi-card { flex: 0 0 100%; padding: 35px 25px; }
    .testi-controls { margin-top: 10px; }
    .testi-progress { width: 120px; }
    .vciso-compact-section { padding: 50px 5%; }
    .vo-compact-image img { max-width: 280px; }
}

@media (max-width: 576px) {
    .managed-hero-section { padding: 90px 4% 40px; min-height: auto; }
    .m-hero-actions { flex-direction: column; width: 100%; gap: 12px; }
    .m-btn-primary, .m-btn-outline { width: 100%; justify-content: center; padding: 14px 20px; font-size: var(--text-sm); }
    .m-breadcrumbs { font-size: 11px; padding: 10px 16px; gap: 6px; }
    .m-breadcrumbs svg { width: 13px; height: 13px; }
    .m-features-wrapper { margin: 30px auto 0; }
    .m-features-strip { padding: 20px 16px; gap: 0; border-radius: 14px; }
    .m-feature-item { padding: 16px 0; border-right: none !important; padding-right: 0 !important; }
    .m-feature-item:not(:last-child) { border-bottom: 1px solid var(--border-light); }
    .premium-intro-section { padding: 50px 4%; }
    .pi-badge { font-size: 10px; padding: 5px 14px; }
    .pi-metrics-row { gap: 12px; }
    .pi-services-card { padding: 36px 16px 20px; }
    .pi-card-top-badge { font-size: 10px; padding: 6px 14px; }
    .pi-modern-list li { padding: 10px 12px; }
    .included-services-section { padding: 60px 4%; }
    .inc-card { padding: 25px 16px; }
    .inc-bottom-strip { padding: 20px 16px; }
    .unified-services-section { padding: 60px 4%; }
    .ind-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ind-card { padding: 16px 10px; }
    .wcu-unified-box { padding: 24px 16px; }
    .advantage-section { padding: 60px 4%; }
    .adv-card { padding: 30px 20px; }
    .work-process-section { padding: 60px 4%; }
    .wp-icon-wrapper { width: 90px; height: 90px; }
    .wp-icon-wrapper svg { width: 36px; height: 36px; }
    .wp-step h3 { min-height: auto; }
    .wp-bg-num { font-size: 50px; }
    .wp-bottom-strip { padding: 20px 16px; }
    .managed-cta-section { padding: 60px 4%; }
    .cta-box { padding: 40px 20px; border-radius: 16px; gap: 30px; }
    .cta-features { grid-template-columns: repeat(2, 1fr); display: grid; gap: 16px; width: 100%; margin-bottom: 30px; }
    .cta-feat-item { width: 100%; }
    .cta-feat-icon { width: 50px; height: 50px; }
    .cta-feat-icon svg { width: 22px; height: 22px; }
    .managed-testimonial-section { padding: 60px 4%; }
    .testi-card { padding: 28px 18px; }
    .testi-progress { width: 90px; }
    .testi-btn { width: 42px; height: 42px; }
}

@media (max-width: 480px) {
    .ind-grid { grid-template-columns: 1fr; }
    .ind-callout { flex-direction: column; text-align: center; }
}

@media (max-width: 400px) {
    .m-hero-visual img { max-width: 280px; }
    .cta-visual img { max-width: 260px; }
}

     /* ======================================================
   6. PREMIUM FAQ ACCORDION (Two-Column Match)
   ====================================================== */
.faq-wrapper {
    max-width: 1200px; /* Widened to fit two columns nicely */
    margin: 0 auto;
}

.faq-grid {
    column-count: 2;
    column-gap: 25px;
}

/* Individual Card (Using details tag as the card) */
details.faq-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-left: 4px solid transparent; /* Reserve space so box doesn't jump */
    border-radius: 12px;
    margin-bottom: 20px;
    break-inside: avoid; /* Prevents card from breaking across columns */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

details.faq-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    border-color: rgba(227, 6, 19, 0.2);
}

/* Active (Open) Card Styling */
details.faq-item[open] {
    border-left-color: var(--brand-red);
    border-color: var(--border-light); /* Resets top/right/bottom border */
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Question Header */
details.faq-item summary {
    padding: 25px 30px 25px 25px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    list-style: none;
    transition: color 0.3s ease;
    line-height: 1.4;
}

details.faq-item summary::-webkit-details-marker { 
    display: none; 
}

details.faq-item[open] summary {
    color: var(--brand-red);
}

/* Circular Icon Box */
.faq-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.06);
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px; /* Slight optical adjustment with text */
}

/* Plus / Minus Lines */
.faq-plus-minus {
    position: relative;
    width: 12px; height: 12px;
}
.faq-plus-minus::before, .faq-plus-minus::after {
    content: '';
    position: absolute;
    background: currentColor;
    top: 50%; left: 50%;
    border-radius: 2px;
}
.faq-plus-minus::before { 
    width: 12px; height: 2px; 
    transform: translate(-50%, -50%);
}
.faq-plus-minus::after { 
    width: 2px; height: 12px; 
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

/* Turn Plus into Minus on Open */
details.faq-item[open] .faq-plus-minus::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
    opacity: 0;
}

/* Expanded Text Content */
.faq-content {
    padding: 0 30px 25px 75px; /* Indents text directly under the title (25px pad + 32px icon + 18px gap = 75px) */
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ======================================================
   BOTTOM CTA BANNER
   ====================================================== */
.faq-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 25px 35px;
    margin-top: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}

.faq-cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-cta-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.08);
    color: var(--brand-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-cta-icon svg { width: 20px; height: 20px; stroke-width: 2; }

.faq-cta-text h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.faq-cta-text p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.faq-cta-btn:hover {
    background: var(--brand-red);
    color: var(--white);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .faq-grid { column-count: 1; }
    .faq-cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 30px 20px;
    }
    .faq-cta-left {
        flex-direction: column;
        gap: 15px;
    }
    .faq-content { padding-left: 25px; } /* Reset indent for smaller screens */
    details.faq-item summary { padding-right: 20px; }
}
/* ==========================================
   FAQ SECTION HEADING
========================================== */

.sl-container{
    max-width: 1300px;
    margin: 0 auto;
}

.text-center{
    text-align: center;
}

.sl-tagline{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--brand-red);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.sl-line-dots{
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-red);
}

.sl-line{
    width: 40px;
    height: 1px;
    background: rgba(227, 6, 19, 0.3);
}

.sl-title{
    font-size: 36px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1;
}

.text-red{
    color: var(--brand-red);
}

.sl-desc{
    max-width: 700px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

 /* ======================================================
   BENEFITS GRID (SCROLLABLE PREMIUM CARDS)
   ====================================================== */
.hg-grid-wrapper { 
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.05)); 
    margin-bottom: 60px; 
}

.hg-grid { 
    display: flex; 
    width: 100%; 
    align-items: stretch; 
    
    /* Horizontal Scrolling */
    overflow-x: auto;
    padding: 15px 10px 30px 10px; /* Bottom padding prevents hover cut-off */
    scroll-snap-type: x mandatory; 
    
    /* Scrollbar Styling */
    scrollbar-width: thin; 
    scrollbar-color: rgba(227, 6, 19, 0.3) transparent;
}

/* Custom Scrollbar for Webkit Browsers */
.hg-grid::-webkit-scrollbar { height: 8px; }
.hg-grid::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); border-radius: 10px; }
.hg-grid::-webkit-scrollbar-thumb { background: rgba(227, 6, 19, 0.3); border-radius: 10px; }
.hg-grid::-webkit-scrollbar-thumb:hover { background: rgba(227, 6, 19, 0.6); }

/* --- Base Card Styling (FIXED TEXT CLIPPING) --- */
.hg-card { 
    background: #ffffff; 
    position: relative; 
    
    /* Slightly wider cards to give text more room */
    flex: 0 0 340px; 
    min-width: 340px; 
    
    /* INCREASED L/R PADDING: 45px forces text away from the 10% diagonal cuts */
    padding: 60px 45px 40px 45px; 
    
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    clip-path: polygon(10% 0%, 100% 0%, 90% 50%, 100% 100%, 10% 100%, 0% 50%); 
    
    /* 10% of 340px is 34px, so this margin creates a seamless interlock */
    margin-left: -34px; 
    
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    z-index: 1; 
    scroll-snap-align: start; 
}

/* Adjustments for the first card */
.hg-card:first-child { 
    clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%); 
    /* Flat edge gets normal padding, cut edge gets the larger 45px padding */
    padding-left: 25px; 
    padding-right: 45px;
    margin-left: 0; 
}

/* Adjustments for the last card */
.hg-card:last-child { 
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%); 
    /* Cut edge gets larger 45px padding, flat edge gets normal padding */
    padding-left: 45px; 
    padding-right: 25px; 
}

/* Card Hover Effects */
.hg-card:hover { 
    transform: translateY(-8px); 
    z-index: 10; 
    background: linear-gradient(180deg, #ffffff 0%, #FFF5F5 100%); 
}

/* Solid red accent line at the bottom */
.hg-card::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    height: 3px; 
    background: var(--brand-red, #E30613); 
    opacity: 1; 
    transition: all 0.3s ease; 
}
.hg-card:hover::after { 
    height: 6px; 
}

/* --- Watermark Background Numbers --- */
.hg-card-num { 
    position: absolute; 
    top: 20px; 
    font-weight: 900; 
    font-size: 28px; 
    color: rgba(227, 6, 19, 0.15); 
    transition: all 0.4s ease; 
}
.hg-card:first-child .hg-card-num { left: 20px; }
.hg-card:not(:first-child) .hg-card-num { left: calc(10% + 15px); }

.hg-card:hover .hg-card-num {
    color: var(--brand-red, #E30613);
    transform: translateY(-3px) scale(1.1);
}

/* --- Premium Squircle Icon Container --- */
.hg-card-icon { 
    width: 64px; 
    height: 64px; 
    margin: 0 auto 25px; 
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--brand-red, #E30613); 
    background: #ffffff; 
    box-shadow: 
        0 10px 20px rgba(227, 6, 19, 0.08), 
        inset 0 0 0 1px rgba(227, 6, 19, 0.1); 
    transition: all 0.4s ease; 
}

.hg-card:hover .hg-card-icon {
    background: var(--brand-red, #E30613);
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(227, 6, 19, 0.25);
    transform: translateY(-5px);
}
.hg-card-icon svg { width: 28px; height: 28px; stroke-width: 2; }

/* --- Typography --- */
.hg-card-title { 
    font-size: 14px; 
    font-weight: 800; 
    color: var(--text-dark, #0F172A); 
    margin: 0 0 12px 0; 
    line-height: 1.5; 
    transition: color 0.3s ease;
}
.hg-card:hover .hg-card-title {
    color: var(--brand-red, #E30613);
}

.hg-card-desc { 
    font-size: 13px; 
    color: var(--text-muted, #64748B); 
    line-height: 1.6; 
    margin: 0; 
    padding: 0 5px; 
}

/* FIX: Auto sliding benefits section */
.hg-grid {
    overflow-x: auto;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
}

.hg-card {
    scroll-snap-align: none !important;
}
/* ======================================================
   RESPONSIVE DESIGN (Mobile adjustments)
   ====================================================== */
@media (max-width: 768px) {
    .hg-grid {
        /* Adjust padding for smaller mobile screens */
        padding: 10px 5px 25px 5px; 
    }
    
    /* Drop the complex clip-paths for clean standard cards on mobile, 
       but keep the horizontal scrolling active */
    .hg-card, .hg-card:first-child, .hg-card:last-child {
        clip-path: none !important;
        margin-left: 0 !important;
        margin-right: 15px; /* Adds space between standard cards */
        padding: 40px 20px 30px 20px !important;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.05);
        flex: 0 0 280px; /* Slightly narrower on mobile */
        min-width: 280px;
    }
    
    .hg-card:last-child {
        margin-right: 0;
    }
    
    .hg-card-num, .hg-card:not(:first-child) .hg-card-num {
        left: 20px !important;
        top: 20px !important;
    }
}
    
 
 /* ======================================================
   CLOUD IT MANAGEMENT SECTION
   ====================================================== */
.sl-cloud-section {
    background-color: var(--light-bg, #ffffff);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-light, #E5E7EB);
    padding: 100px 5%;
}

.sl-cloud-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

.sl-cloud-title {
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 900;
    color: var(--text-dark, #111827);
    line-height: 1.15;
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

.sl-cloud-title .highlight-red { 
    color: var(--brand-red, #E30613); 
}

.sl-cloud-desc {
    font-size: 16px;
    color: var(--text-grey, #6B7280);
    line-height: 1.7;
    margin: 0 0 15px 0;
    max-width: 580px;
}

/* --- HORIZONTAL SLIDER: 2 Rows, 2 Columns Visible --- */
.sl-cloud-types-slider {
    display: grid;
    grid-template-rows: repeat(2, 1fr); /* Locks the grid to exactly 2 rows */
    grid-auto-flow: column; /* Items fill top-to-bottom, then left-to-right */
    
    /* Exactly 50% width minus half the gap ensures exactly 2 columns (4 pills) are visible */
    grid-auto-columns: calc(50% - 6px); 
    
    gap: 12px;
    margin: 25px 0 35px 0;
    max-width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling */
    padding-bottom: 15px; /* Space for scrollbar */
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(227, 6, 19, 0.3) transparent;
}

/* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
.sl-cloud-types-slider::-webkit-scrollbar { height: 6px; }
.sl-cloud-types-slider::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); border-radius: 10px; }
.sl-cloud-types-slider::-webkit-scrollbar-thumb { background: rgba(227, 6, 19, 0.3); border-radius: 10px; }
.sl-cloud-types-slider::-webkit-scrollbar-thumb:hover { background: rgba(227, 6, 19, 0.6); }

/* --- Slider Cards (Pills) --- */
.sl-cloud-type-card {
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--alt-bg, #FAFAFA);
    border: 1px solid var(--border-light, #E5E7EB);
    padding: 14px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    white-space: normal;
    height: 100%; /* Stretches to match row height perfectly */
}

.sl-cloud-type-card:hover {
    background: #ffffff;
    border-color: rgba(227, 6, 19, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.sl-ct-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(227, 6, 19, 0.08);
    color: var(--brand-red, #E30613);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.sl-cloud-type-card:hover .sl-ct-icon {
    background: var(--brand-red, #E30613);
    color: #ffffff;
}

.sl-ct-icon svg { 
    width: 20px; 
    height: 20px; 
    stroke-width: 2; 
}

.sl-cloud-type-card span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark, #111827);
    line-height: 1.4;
}

/* --- Button --- */
.sl-cloud-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-red, #E30613);
    color: #ffffff !important;
    padding: 16px 28px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    border-radius: 6px;
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(227, 6, 19, 0.25);
    transition: all 0.3s ease;
    width: max-content;
}

.sl-cloud-btn:hover { 
    background: #C50510; 
    box-shadow: 0 15px 35px rgba(227, 6, 19, 0.35); 
    transform: translateY(-2px); 
}

.sl-cloud-btn svg { transition: transform 0.3s ease; }
.sl-cloud-btn:hover svg { transform: translateX(5px); }

/* --- Right Column Visuals --- */
.sl-cloud-visual {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-cloud-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3D Main Image */
.sl-cloud-main-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
    animation: float3D 6s ease-in-out infinite;
}

@keyframes float3D {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

/* Background Decorative Grid */
.sl-cloud-deco-grid {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 70%;
    background-image: radial-gradient(var(--text-muted, #9CA3AF) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.2;
    z-index: 0;
}

/* Background Glowing Blob */
.sl-cloud-deco-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.15) 0%, transparent 60%);
    z-index: 1;
    filter: blur(40px);
}

/* Floating Badge */
.sl-cloud-float-badge {
    position: absolute;
    bottom: 20px;
    left: 0;
    background: #ffffff;
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    z-index: 5;
    animation: floatBadge 5s ease-in-out infinite reverse;
}

.sl-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #10B981; 
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-badge-icon svg { 
    width: 16px; 
    height: 16px; 
    stroke-width: 2.5; 
}

.sl-badge-text { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

.sl-badge-text strong { 
    font-size: 14px; 
    font-weight: 800; 
    color: var(--text-dark, #111827); 
}

.sl-badge-text span { 
    font-size: 11px; 
    font-weight: 600; 
    color: var(--text-muted, #9CA3AF); 
    text-transform: uppercase; 
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(8px); }
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
    .sl-cloud-container { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    .sl-cloud-content { 
        max-width: 800px; 
        margin: 0 auto; 
    }
    .sl-cloud-visual { 
        max-width: 600px; 
        margin: 0 auto; 
    }
}

@media (max-width: 600px) {
    .sl-cloud-types-slider { 
        /* Show 1 column (2 pills) + 15% peek of next column on mobile */
        grid-auto-columns: 85%; 
    }
    .sl-cloud-deco-grid { 
        display: none; 
    }
    .sl-cloud-float-badge { 
        padding: 12px 16px; 
        left: 10px; 
        bottom: 0; 
    }
}
/* ======================================================
   INCLUDED SERVICES SECTION
   ====================================================== */
.included-services-section {
    background-color: var(--light-bg, #ffffff);
    padding: 100px 5%;
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
}

.inc-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.inc-main-split {
    display: flex;
    gap: 60px;
    align-items: stretch;
}

/* --- Left Column --- */
.inc-left {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
}

.inc-label {
    color: var(--brand-red, #E30613);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.inc-title {
    color: var(--text-dark, #111827);
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.inc-title .text-red {
    color: var(--brand-red, #E30613);
}

.inc-title-underline {
    width: 60px;
    height: 4px;
    background-color: var(--brand-red, #E30613);
    margin-bottom: 25px;
    border-radius: 2px;
}

.inc-desc {
    color: var(--text-grey, #6B7280);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 35px 0;
}

.inc-callout {
    background: var(--alt-bg, #FAFAFA);
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    margin-bottom: 40px;
    transition: all 0.3s ease;
}
.inc-callout:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: rgba(227, 6, 19, 0.2);
}

.inc-callout-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red, #E30613);
    flex-shrink: 0;
}

.inc-callout-icon svg { width: 24px; height: 24px; stroke-width: 2; }

.inc-callout-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark, #111827);
    font-weight: 700;
    margin: 0;
}

.inc-callout-text .text-red {
    color: var(--brand-red, #E30613);
}

.inc-image-wrapper {
    margin-top: auto; 
    text-align: center;
    position: relative;
}

.inc-image-wrapper img {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.08));
    animation: floatImage 6s ease-in-out infinite;
}

/* --- Right Column (Grid) --- */
.inc-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.inc-right-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.inc-right-header::before {
    content: '';
    width: 4px;
    height: 24px;
    background-color: var(--brand-red, #E30613);
    border-radius: 2px;
}

.inc-right-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark, #111827);
}

/* --- Right Column (Grid Slider) --- */
.inc-services-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr); /* Forces exactly 2 rows */
    grid-auto-flow: column; /* Forces items to flow horizontally */
    grid-auto-columns: calc(50% - 10px); /* Shows 2 cards per view (50% width minus half the gap) */
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    padding-bottom: 25px; /* Adds space for hover shadows */
    cursor: grab;
    scroll-behavior: smooth;
}

/* Hides scrollbar in Chrome/Safari/Edge */
.inc-services-grid::-webkit-scrollbar {
    display: none; 
}

.inc-services-grid:active {
    cursor: grabbing;
}

.inc-card {
    scroll-snap-align: start;
    height: 100%; /* Ensures all cards in the row stretch to equal heights */
    background: var(--alt-bg, #FAFAFA);
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 12px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.inc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-color: rgba(227, 6, 19, 0.2);
    background: var(--light-bg, #ffffff);
}

/* ... Keep your existing .inc-card-icon, h4, and p CSS exactly as they are ... */

.inc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-color: rgba(227, 6, 19, 0.2);
    background: var(--light-bg, #ffffff);
}

.inc-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: rgba(227, 6, 19, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red, #E30613);
    margin-bottom: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.inc-card:hover .inc-card-icon {
    background-color: var(--brand-red, #E30613);
    color: #ffffff;
}

.inc-card-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

.inc-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark, #111827);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.inc-card-divider {
    width: 30px;
    height: 2px;
    background-color: var(--brand-red, #E30613);
    margin-bottom: 12px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.inc-card:hover .inc-card-divider {
    width: 50px;
}

.inc-card p {
    font-size: 13px;
    color: var(--text-grey, #6B7280);
    line-height: 1.6;
    margin: 0;
}

/* --- Bottom Strip --- */
.inc-bottom-strip {
    background: var(--light-bg, #ffffff);
    border-radius: 16px;
    padding: 35px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid var(--border-light, #E5E7EB);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: center;
}

.inc-bs-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.inc-bs-item:not(:last-child) {
    border-right: 1px solid var(--border-light, #E5E7EB);
    padding-right: 25px;
}

.inc-bs-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-red, #E30613);
    flex-shrink: 0;
}

.inc-bs-icon svg { width: 20px; height: 20px; stroke-width: 2; }

.inc-bs-text h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark, #111827);
    margin: 0 0 4px 0;
}

.inc-bs-text p {
    font-size: 11px;
    color: var(--text-grey, #6B7280);
    margin: 0;
    line-height: 1.4;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .inc-main-split { gap: 40px; }
    .inc-left { flex: 0 0 350px; }
    .inc-bottom-strip { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .inc-bs-item:nth-child(2) { border-right: none; padding-right: 0; }
}

@media (max-width: 992px) {
    .inc-main-split { flex-direction: column; }
    .inc-left { flex: none; width: 100%; max-width: 600px; margin: 0 auto; text-align: center; }
    .inc-title-underline { margin: 0 auto 25px auto; }
    .inc-callout { text-align: left; }
    .inc-image-wrapper { display: none; /* Hide floating image on smaller screens to save space */ }
    .inc-right-header { justify-content: center; }
}

@media (max-width: 768px) {
    .inc-services-grid { grid-template-columns: 1fr; }
    .inc-bottom-strip { grid-template-columns: 1fr; padding: 25px; gap: 20px; }
    .inc-bs-item { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--border-light, #E5E7EB); padding-bottom: 20px; }
    .inc-bs-item:last-child { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 768px) {
    .inc-services-grid { 
        grid-template-rows: 1fr; /* Switch to 1 row on mobile */
        grid-auto-columns: 85%; /* Shows 85% of one card so the next one peeks in from the edge */
    }
    
    /* ... keep your other mobile CSS ... */
}

/* why choose us */

    /* ======================================================
       WHY CHOOSE US SECTION
       ====================================================== */
    .why-choose-section {
        background-color: #FFFFFF; /* Updated to Pure White */
        padding: 100px 5%;
        position: relative;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .wcu-container {
        max-width: 1300px;
        margin: 0 auto;
    }

    /* --- Header Area --- */
    .wcu-header {
        text-align: center;
        margin-bottom: 60px;
    }

    /* Custom Pill Label with Lines & Dots */
    .wcu-label-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .wcu-line-dot {
        display: flex;
        align-items: center;
    }
    .wcu-line-dot.left::before { content: ''; width: 30px; height: 1px; background: #E30613; opacity: 0.5; }
    .wcu-line-dot.left::after { content: ''; width: 4px; height: 4px; background: #E30613; border-radius: 50%; margin-left: 5px; }
    
    .wcu-line-dot.right::after { content: ''; width: 30px; height: 1px; background: #E30613; opacity: 0.5; }
    .wcu-line-dot.right::before { content: ''; width: 4px; height: 4px; background: #E30613; border-radius: 50%; margin-right: 5px; }

    .wcu-pill {
        background: #E30613;
        color: #FFFFFF;
        padding: 6px 20px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        box-shadow: 0 4px 10px rgba(227, 6, 19, 0.2);
    }

    .wcu-title {
        color: #111827;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        line-height: 1.2;
        margin: 0 0 15px 0;
        letter-spacing: -1px;
    }
    .wcu-title .text-red { color: #E30613; }

    .wcu-desc {
        color: #6B7280;
        font-size: 16px;
        line-height: 1.6;
        max-width: 700px;
        margin: 0 auto;
    }

    /* --- Grid Area --- */
    .wcu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Individual Card */
    .wcu-card {
        background: #FFFFFF;
        border: 1px solid #F3F4F6; /* Added subtle border for contrast against white bg */
        border-radius: 12px;
        padding: 40px 35px;
        position: relative;
        text-align: left;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        border-bottom: 4px solid #E30613;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        overflow: hidden;
    }

    .wcu-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    }

    /* Top Right Dotted Pattern */
    .wcu-card-dots {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 70px;
        height: 70px;
        background-image: radial-gradient(rgba(227, 6, 19, 0.15) 2px, transparent 2px);
        background-size: 10px 10px;
        z-index: 0;
    }

    /* Custom Icon Box with SVG Arc */
    .wcu-icon-box {
        position: relative;
        width: 60px;
        height: 60px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .wcu-icon-svg {
        width: 28px;
        height: 28px;
        color: #E30613;
        z-index: 2;
    }

    /* The decorative red circle/arc around the icon */
    .wcu-arc {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transform: rotate(-15deg);
    }

    .wcu-card h3 {
        font-size: 17px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 15px 0;
        position: relative;
        z-index: 2;
    }

    /* Small red line accent under the title */
    .wcu-card h3::after {
        content: '';
        display: block;
        width: 25px;
        height: 2px;
        background: #E30613;
        margin-top: 12px;
        border-radius: 2px;
    }

    .wcu-card p {
        font-size: 13.5px;
        color: #6B7280;
        line-height: 1.7;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1100px) {
        .wcu-grid { grid-template-columns: repeat(2, 1fr); }
    }
    
    @media (max-width: 768px) {
        .wcu-grid { grid-template-columns: 1fr; }
        .wcu-card { padding: 35px 25px; }
    }
    
    
     /* ======================================================
   CYBER HERO BANNER (LIGHT THEME - ISOLATED COLORS)
   ====================================================== */
.cyber-hero-banner {
    /* Scoped variables so it doesn't conflict with your global :root dark theme */
    --neon-red: #E30613;
    --hero-text-dark: #0F172A; /* Forces text to be dark navy */
    --hero-text-muted: #64748B; /* Forces subtitles to be gray */
    --hero-border-light: rgba(0, 0, 0, 0.08);

    position: relative;
    min-height: 80vh;
    background-color: #FFFFFF; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 80px 5% 40px;
    color: var(--hero-text-dark);
    border-bottom: 1px solid rgba(227, 6, 19, 0.1);
    font-family: 'Inter', sans-serif;
}

/* Abstract Tech Grid & Starry Background */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at center, rgba(227, 6, 19, 0.05) 0%, transparent 50%),
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    z-index: 0;
    pointer-events: none;
}

.hero-globe-bg {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.05) 0%, transparent 60%);
    border-radius: 50%;
    z-index: 1;
    border: 1px dashed rgba(0, 0, 0, 0.08); 
}

.hero-container {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* ================= LEFT COLUMN ================= */
.hero-left {
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-breadcrumb {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--hero-border-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
    margin-bottom: 30px;
}
.hero-breadcrumb a { color: var(--hero-text-muted); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.3s; }
.hero-breadcrumb a:hover { color: var(--neon-red); }
.hero-breadcrumb a svg { width: 14px; height: 14px; }
.hero-breadcrumb .sep { color: #CBD5E1; font-size: 12px; }
.hero-breadcrumb .current { color: var(--neon-red); font-weight: 600; }

.hero-top-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(227, 6, 19, 0.3);
    background: rgba(227, 6, 19, 0.05);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--neon-red);
    margin-bottom: 20px;
}
.hero-top-label svg { width: 14px; height: 14px; color: var(--neon-red); }

/* Force Title to use the dark variable */
.hero-title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
    color: var(--hero-text-dark) !important; 
}
.hero-title .text-red { color: var(--neon-red); }

/* Force Subtitle to use the dark variable */
.hero-subtitle {
    color: var(--hero-text-muted) !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 35px 0;
    max-width: 550px;
}

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

.btn-red {
    background: linear-gradient(90deg, #FF0033 0%, #B30000 100%);
    color: #FFF !important;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(227, 6, 19, 0.2);
    transition: all 0.3s ease;
    border: 1px solid #FF3366;
}
.btn-red:hover { box-shadow: 0 15px 30px rgba(227, 6, 19, 0.3); transform: translateY(-2px); }
.btn-red span { transition: transform 0.3s; }
.btn-red:hover span { transform: translateX(4px); }

/* Force Outline Button to use the dark text variable */
.btn-outline {
    background: transparent;
    color: var(--hero-text-dark) !important;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.btn-outline:hover { background: #F8FAFC; border-color: var(--hero-text-dark); }
.btn-outline svg { width: 18px; height: 18px; }

/* ================= RIGHT COLUMN ================= */
.hero-right {
    flex: 1;
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.podium-container {
    position: absolute;
    bottom: 20px;
    width: 350px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid rgba(227, 6, 19, 0.2);
    box-shadow: 0 0 40px rgba(227, 6, 19, 0.1), inset 0 0 20px rgba(227, 6, 19, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(600px) rotateX(70deg);
}
.podium-inner {
    width: 250px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--neon-red);
    box-shadow: 0 0 30px rgba(227, 6, 19, 0.4), inset 0 0 30px rgba(227, 6, 19, 0.2);
}

.central-logo-area {
    position: relative;
    z-index: 10;
    animation: float 6s ease-in-out infinite;
}
.central-logo-area img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
}
.central-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    background: var(--neon-red);
    filter: blur(60px);
    opacity: 0.5;
    z-index: -1;
}

/* Force Cards to use dark text variables */
.glass-card {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid rgba(227, 6, 19, 0.15);
    border-radius: 12px;
    padding: 20px;
    width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    z-index: 5;
}
.glass-card::before { 
    content: '';
    position: absolute;
    top: 0; left: 10%; width: 80%; height: 2px;
    background: var(--neon-red);
}
.gc-icon {
    width: 35px; height: 35px;
    background: rgba(227, 6, 19, 0.05);
    border: 1px solid rgba(227, 6, 19, 0.1);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 15px;
    color: var(--neon-red);
}
.gc-icon svg { width: 18px; height: 18px; }

/* Fixed card text colors */
.glass-card h4 { font-size: 15px; font-weight: 700; margin: 0 0 8px 0; color: var(--hero-text-dark) !important; }
.glass-card p { font-size: 12px; color: var(--hero-text-muted) !important; margin: 0; line-height: 1.4; }

.card-tl { top: 20px; left: -40px; }
.card-tr { top: 20px; right: -40px; }
.card-bl { bottom: 80px; left: -40px; }
.card-br { bottom: 80px; right: -40px; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* ================= BOTTOM FEATURE STRIP ================= */
.hero-bottom-strip {
    position: relative;
    z-index: 4;
    max-width: 1400px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.strip-divider { width: 1px; height: 30px; background: rgba(0, 0, 0, 0.1); }

.si-icon {
    width: 40px; height: 40px;
    border: 1px solid rgba(227, 6, 19, 0.15);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--neon-red);
    background: rgba(227, 6, 19, 0.05);
}
.si-icon svg { width: 20px; height: 20px; }
 
/* Fixed strip text colors */
.si-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--hero-text-dark) !important; margin-bottom: 3px; }
.si-text span { font-size: 12px; color: var(--hero-text-muted) !important; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
    .hero-container { flex-direction: column; text-align: center; }
    .hero-left { align-items: center; max-width: 100%; }
    .hero-subtitle { margin: 0 auto 30px; }
    .hero-actions { justify-content: center; }
    .hero-right { width: 100%; height: auto; padding: 100px 0; margin-top: 40px; }
    .card-tl { top: 0; left: 0; }
    .card-tr { top: 0; right: 0; }
    .card-bl { bottom: 0; left: 0; }
    .card-br { bottom: 0; right: 0; }
    .hero-bottom-strip { flex-wrap: wrap; justify-content: center; }
    .strip-divider { display: none; }
}
@media (max-width: 768px) {
    .glass-card { position: static; width: 100%; margin-bottom: 15px; }
    .hero-right { flex-direction: column; padding: 40px 0; }
    .podium-container { display: none; }
    .hero-bottom-strip { flex-direction: column; align-items: flex-start; margin-left: 0;}
}

/* ======================================================
       DEPLOYMENT & PRODUCTIVITY HIGHLIGHTS SECTION
       ====================================================== */
    .highlights-section {
        background-color: #FFFFFF;
        padding: 100px 5%;
        position: relative;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .hl-container {
        max-width: 1300px;
        margin: 0 auto;
    }

    /* --- Header Area --- */
    .hl-header {
        text-align: center;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hl-label {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #E30613;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .hl-label-line {
        display: inline-flex;
        align-items: center;
    }
    .hl-label-line::before { content: ''; width: 30px; height: 1px; background: #E30613; opacity: 0.5; }
    .hl-label-line::after { content: ''; width: 4px; height: 4px; background: #E30613; border-radius: 50%; margin: 0 4px; }
    
    .hl-label-line.right::before { order: 2; margin-left: 4px; }
    .hl-label-line.right::after { order: 1; margin: 0; }

    .hl-title {
        color: #111827;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        line-height: 1.2;
        margin: 0 0 15px 0;
        letter-spacing: -1px;
    }
    .hl-title .text-red { color: #E30613; }

    .hl-desc {
        color: #6B7280;
        font-size: 16px;
        line-height: 1.6;
        max-width: 700px;
        margin: 0 0 30px 0;
    }

    .hl-hexagon-divider {
        color: #E30613;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        margin-bottom: 40px;
    }
    .hl-hexagon-divider::before, .hl-hexagon-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(227,6,19,0.2) 50%, transparent);
        max-width: 300px;
        margin: 0 15px;
    }
    .hl-hexagon-divider svg { width: 24px; height: 24px; stroke-width: 2.5; }

    /* --- Main Split Content --- */
    .hl-main-content {
        display: flex;
        align-items: center;
        gap: 30px;
        margin-bottom: 30px;
    }

    .hl-visual-col {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    /* Placeholder for the 3D Cloud Graphic */
    .hl-visual-col img {
        width: 100%;
        max-width: 500px;
        height: auto;
        object-fit: contain;
    }

    /* Connector Arrow */
    .hl-connector {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #E30613;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        z-index: 2;
    }

    /* Right Card */
    .hl-card-col {
        flex: 1.2;
    }

    .hl-primary-card {
        background: #FFFFFF;
        border: 1px solid #F3F4F6;
        border-radius: 16px;
        padding: 40px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.04);
        border-left: 4px solid #E30613; /* The red accent line */
    }

    .hl-card-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .hl-icon-hex-red {
        width: 60px; height: 60px;
        background: #E30613;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: #FFFFFF;
        flex-shrink: 0;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
    .hl-icon-hex-red svg { width: 28px; height: 28px; stroke-width: 2; }

    .hl-card-header h3 {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        margin: 0;
        line-height: 1.3;
    }

    .hl-primary-card > p {
        color: #6B7280;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 30px;
    }

    /* Mini Grid inside Top Card */
    .hl-mini-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .hl-mf-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 15px;
        border: 1px solid #F3F4F6;
        border-radius: 8px;
        background: #FFFFFF;
        transition: border-color 0.3s;
    }
    .hl-mf-item:hover { border-color: rgba(227,6,19,0.3); }
    
    .hl-mf-icon {
        color: #E30613;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hl-mf-icon svg { width: 20px; height: 20px; stroke-width: 2; }

    .hl-mf-item span {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }

    /* --- Bottom Horizontal Card --- */
    .hl-bottom-card {
        background: #FAFAFA;
        border: 1px solid #F3F4F6;
        border-radius: 16px;
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .hl-bc-left {
        flex: 0 0 350px;
        display: flex;
        flex-direction: column;
    }

    .hl-bc-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .hl-bc-header h3 {
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        margin: 0;
        line-height: 1.3;
    }

    .hl-bc-left p {
        color: #6B7280;
        font-size: 13px;
        line-height: 1.6;
        margin: 0;
    }

    /* Vertical Divider */
    .hl-bc-divider {
        width: 1px;
        align-self: stretch;
        background: #E5E7EB;
    }

    .hl-bc-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }

    .hl-bc-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        position: relative;
    }
    
    .hl-bc-icon {
        color: #E30613;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .hl-bc-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }

    .hl-bc-text {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        line-height: 1.4;
    }
    
    /* Small red line under the bottom grid items (as seen in image) */
    .hl-bc-text::after {
        content: '';
        display: block;
        width: 15px;
        height: 2px;
        background: #E30613;
        margin-top: 8px;
        border-radius: 2px;
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1100px) {
        .hl-main-content { flex-direction: column; }
        .hl-connector { transform: rotate(90deg); margin: -10px 0; } /* Rotate arrow to point down */
        .hl-bottom-card { flex-direction: column; align-items: flex-start; gap: 30px; }
        .hl-bc-left { flex: none; width: 100%; }
        .hl-bc-divider { height: 1px; width: 100%; }
        .hl-bc-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
    }
    
    @media (max-width: 768px) {
        .hl-mini-features { grid-template-columns: 1fr; }
        .hl-bc-grid { grid-template-columns: 1fr; }
        .hl-primary-card { padding: 25px; }
        .hl-bottom-card { padding: 25px; }
    }
    
    
    
     /* ======================================================
       SCALABLE FRAMEWORKS SECTION
       ====================================================== */
    .scalable-section {
        background-color: #F8F9FA; /* Extremely faint grey to contrast white cards */
        padding: 100px 5%;
        position: relative;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .scale-container {
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        gap: 60px;
        align-items: center;
    }

    /* ================= LEFT COLUMN ================= */
    .scale-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Top Label */
    .scale-label {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #E30613;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    /* Reusable Line with Dot */
    .line-dot {
        display: inline-flex;
        align-items: center;
        width: 80px;
    }
    .line-dot::before { content: ''; flex: 1; height: 1px; background: #E30613; opacity: 0.5; }
    .line-dot::after { content: ''; width: 4px; height: 4px; background: #E30613; border-radius: 50%; margin-left: 4px; }

    .scale-title {
        color: #111827;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 900;
        line-height: 1.2;
        margin: 0 0 15px 0;
        letter-spacing: -1px;
    }
    .scale-title .text-red { color: #E30613; }

    .title-underline {
        width: 40px;
        height: 3px;
        background: #E30613;
        margin-bottom: 25px;
        border-radius: 2px;
    }

    .scale-desc {
        color: #6B7280;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 40px;
        text-align: justify;
    }

    /* Sectors Header */
    .sectors-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .sh-icon {
        width: 40px;
        height: 40px;
        background: #E30613;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        box-shadow: 0 4px 10px rgba(227, 6, 19, 0.2);
    }
    .sh-icon svg { width: 20px; height: 20px; }

    .sh-title {
        font-size: 16px;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

    /* Stretch line dot for the sub-header */
    .sectors-header .line-dot { width: 120px; }

    /* Sectors Card & Grid */
    .sectors-card {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    }

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

    .sector-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border: 1px solid #F3F4F6;
        border-radius: 10px;
        background: #FFFFFF;
        font-size: 13px;
        font-weight: 600;
        color: #1F2937;
        transition: all 0.3s ease;
    }

    .sector-item:hover {
        border-color: rgba(227, 6, 19, 0.3);
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        transform: translateY(-2px);
    }

    .si-icon {
        color: #E30613;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(227, 6, 19, 0.05);
        padding: 6px;
        border-radius: 6px;
    }
    .si-icon svg { width: 16px; height: 16px; stroke-width: 2; }

    /* ================= RIGHT COLUMN (Image) ================= */
    .scale-visual {
        flex: 1.1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .scale-visual img {
        width: 100%;
        max-width: 650px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 20px 30px rgba(0,0,0,0.05));
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1024px) {
        .scale-container {
            flex-direction: column;
            gap: 50px;
        }
        .scale-visual {
            order: -1; /* Move image to top on mobile/tablet */
        }
    }
    
    @media (max-width: 768px) {
        .sector-grid {
            grid-template-columns: 1fr; /* Single column grid for small screens */
        }
        .sectors-card {
            padding: 20px;
        }
        .scale-label .line-dot, .sectors-header .line-dot {
            flex: 1; /* Lines take up remaining space on mobile */
        }
    }
    
    
.srk26itms-compliance-section{
    background:#ffffff;
    padding:100px 5%;
    font-family:Inter,system-ui,sans-serif;
}

.srk26itms-container{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    gap:60px;
    align-items:center;
}

.srk26itms-left{
    flex:1;
    max-width:550px;
}

.srk26itms-label{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#E30613;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.srk26itms-label:before{
    content:"";
    width:30px;
    height:1px;
    background:#E30613;
    opacity:.5;
}

.srk26itms-title{
    font-size:clamp(32px,4vw,48px);
    line-height:1.2;
    font-weight:900;
    color:#111827;
    margin:0 0 20px;
}

.srk26itms-red{
    color:#E30613;
}

.srk26itms-desc{
    color:#6B7280;
    font-size:16px;
    line-height:1.6;
    margin-bottom:30px;
}

.srk26itms-compliance-box{
    background:#FFF5F5;
    border-left:4px solid #E30613;
    padding:20px 25px;
    border-radius:0 8px 8px 0;
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.srk26itms-cb-icon{
    color:#E30613;
    font-size:22px;
    font-weight:700;
    flex-shrink:0;
}

.srk26itms-cb-text{
    margin:0;
    color:#111827;
    font-size:14px;
    font-weight:600;
    line-height:1.6;
}

.srk26itms-right{
    flex:1.2;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.srk26itms-card{
    background:#fff;
    border:1px solid #f3f4f6;
    border-radius:12px;
    padding:25px;
    display:flex;
    align-items:center;
    gap:15px;
    transition:.3s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.03);
}

.srk26itms-card:hover{
    transform:translateY(-3px);
    border-color:rgba(227,6,19,.25);
    box-shadow:0 15px 30px rgba(0,0,0,.06);
}

.srk26itms-card-icon{
    width:45px;
    height:45px;
    border-radius:10px;
    background:rgba(227,6,19,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.srk26itms-card h4{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#111827;
    font-weight:700;
}

.srk26itms-card-full{
    grid-column:1/-1;
    justify-content:center;
}

@media(max-width:991px){

    .srk26itms-container{
        flex-direction:column;
        gap:40px;
    }

    .srk26itms-left,
    .srk26itms-right{
        width:100%;
        max-width:100%;
    }
}

@media(max-width:767px){

    .srk26itms-compliance-section{
        padding:70px 5%;
    }

    .srk26itms-right{
        grid-template-columns:1fr;
    }

    .srk26itms-card-full{
        grid-column:auto;
    }

    .srk26itms-title{
        font-size:32px;
    }
}


.why-section {
    padding: 100px 5%;
    background: #f8fafc;
}

.container {
    max-width: 1400px;
    margin: auto;
}

.why-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.why-content {
    flex: 1.2;
}

.why-image {
    flex: 1;
    text-align: center;
}

.why-image img {
    width: 100%;
    max-width: 550px;
}

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: #E30613;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-title {
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 20px;
    color: #111827;
}

.section-title span {
    color: #E30613;
}

.section-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
    margin-bottom: 30px;
    max-width: 700px;
}

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

.feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: .3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
}

.feature-icon {
    width: 42px;
    height: 42px;
    background: rgba(227,6,19,.08);
    color: #E30613;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.feature-card p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

/* =========================================
   NEW: Premium List (ul/li) Styling
========================================= */

.why-content ul {
    list-style: none; /* Removes default browser bullets */
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.why-content ul li {
    position: relative;
    padding-left: 42px;
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.6;
    transition: all 0.3s ease;
    cursor: default;
}

/* Custom Checkmark Icon */
.why-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: rgba(227, 6, 19, 0.08); /* Matches your feature-icon theme */
    border-radius: 50%;
    /* Embedded SVG for a sharp, resolution-independent checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E30613' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

/* Hover Effects */
.why-content ul li:hover {
    color: #111827;
    transform: translateX(6px); /* Slight nudge to the right */
}

.why-content ul li:hover::before {
    background-color: #E30613; /* Icon background turns solid red */
    /* Checkmark stroke turns white */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    box-shadow: 0 6px 15px rgba(227, 6, 19, 0.2);
}

/* =========================================
   Mobile Media Query
========================================= */

@media(max-width:991px) {
    .why-wrapper {
        flex-direction: column;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .why-content {
        text-align: center;
    }

    /* Keeps the custom list aligned properly when the parent is text-align: center */
    .why-content ul {
        align-items: center; 
    }

    .why-content ul li {
        text-align: left;
        max-width: fit-content;
    }
}


.partner-banner{
    margin-top:60px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:30px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.partner-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.partner-left img{
    width:180px;
    height:auto;
}

.partner-left h3{
    margin:0;
    font-size:24px;
    line-height:1.3;
    font-weight:800;
    color:#111827;
}

.partner-features{
    display:flex;
    align-items:center;
    gap:20px;
}

.partner-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#111827;
}

.partner-item .icon{
    color:#E30613;
    font-size:18px;
}

.partner-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#E30613;
}

.partner-btn{
    background:#E30613;
    color:#fff;
    padding:14px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s;
}

.partner-btn:hover{
    background:#c30510;
    transform:translateY(-3px);
}

@media(max-width:992px){

    .partner-banner{
        flex-direction:column;
        text-align:center;
    }

    .partner-left{
        flex-direction:column;
    }

    .partner-features{
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media(max-width:576px){

    .partner-features{
        flex-direction:column;
        gap:15px;
    }

    .partner-dot{
        display:none;
    }

    .partner-left img{
        width:140px;
    }

    .partner-left h3{
        font-size:20px;
    }

    .partner-btn{
        width:100%;
        justify-content:center;
    }
}

/* ======================================================
   ULTRA-PREMIUM CYBERSECURITY CONSULTING SECTION
   Namespace: slx-cyber- (Zero conflict guarantee)
   No CSS Variables Used
   ====================================================== */

.slx-cyber-section {
    position: relative;
    background-color: #ffffff;
    padding: 120px 5%;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    z-index: 1;
}

/* --- Ambient Background --- */
.slx-cyber-bg-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.slx-cyber-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(10, 15, 24, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 15, 24, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.slx-cyber-ambient-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.03) 0%, transparent 60%);
    top: -200px;
    left: -200px;
    border-radius: 50%;
}

/* --- Layout --- */
.slx-cyber-wrapper {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Visual Stack (Left) --- */
.slx-cyber-visual-stack {
    flex: 1;
    position: relative;
    max-width: 600px;
}

.slx-cyber-image-frame {
    position: relative;
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border-radius: 2px;
    padding: 40px;
    box-shadow: 
        0 20px 40px -10px rgba(10, 15, 24, 0.05),
        inset 0 0 0 1px rgba(10, 15, 24, 0.03);
}

.slx-cyber-hero-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    transform: translateZ(0);
    animation: slxCyberHover 6s ease-in-out infinite;
}

/* Tech Corners */
.slx-cyber-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: #e30613;
    border-style: solid;
}
.slx-corner-tl {
    top: -2px; left: -2px;
    border-width: 3px 0 0 3px;
}
.slx-corner-br {
    bottom: -2px; right: -2px;
    border-width: 0 3px 3px 0;
}

/* Floating Glass Badge */
.slx-cyber-floating-badge {
    position: absolute;
    bottom: 30px;
    right: -40px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(10, 15, 24, 0.06);
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 15px 35px rgba(10, 15, 24, 0.08);
    animation: slxCyberHover 5s ease-in-out infinite reverse;
    z-index: 2;
}

.slx-cyber-badge-icon svg {
    width: 32px;
    height: 32px;
}

.slx-cyber-badge-content {
    display: flex;
    flex-direction: column;
}

.slx-cyber-badge-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0a0f18;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slx-cyber-badge-sub {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

@keyframes slxCyberHover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- Editorial Content (Right) --- */
.slx-cyber-content-stack {
    flex: 1.1;
    display: flex;
    flex-direction: column;
}

.slx-cyber-micro-header {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #475569;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slx-cyber-slash {
    color: #e30613;
}

.slx-cyber-headline {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    color: #0a0f18;
    margin: 0 0 32px 0;
    letter-spacing: -0.04em;
}

.slx-cyber-text-gradient {
    background: linear-gradient(135deg, #e30613 0%, #9e0009 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.slx-cyber-prose {
    position: relative;
    padding-left: 24px;
}

.slx-cyber-prose::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #e30613, transparent);
    border-radius: 3px;
}

.slx-cyber-lead-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0a0f18;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.slx-cyber-body-text {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.8;
    margin: 0;
}

/* Premium Data Grid */
.slx-cyber-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(10, 15, 24, 0.08);
}

.slx-cyber-data-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0a0f18;
    transition: transform 0.3s ease;
}

.slx-cyber-data-item:hover {
    transform: translateX(5px);
}

.slx-cyber-data-dot {
    width: 6px;
    height: 6px;
    background-color: #e30613;
    box-shadow: 0 0 10px #e30613;
    transform: rotate(45deg);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .slx-cyber-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .slx-cyber-visual-stack {
        margin-bottom: 40px;
    }

    .slx-cyber-floating-badge {
        right: 50%;
        transform: translateX(50%);
        bottom: -20px;
        animation: none; /* Disable animation on mobile to prevent overflow issues */
    }

    .slx-cyber-prose {
        padding-left: 0;
        text-align: center;
    }

    .slx-cyber-prose::before {
        display: none;
    }

    .slx-cyber-micro-header {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .slx-cyber-data-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .slx-cyber-data-item {
        justify-content: center;
    }
}

    /* ======================================================
       COMPREHENSIVE SOLUTIONS SECTION (LIGHT PREMIUM)
       ====================================================== */
    .comprehensive-section {
        background-color: #FFFFFF;
        padding: 100px 5%;
        position: relative;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .comp-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        gap: 50px;
        align-items: stretch;
    }

    /* ================= LEFT COLUMN ================= */
    .comp-left {
        flex: 1.2;
        display: flex;
        flex-direction: column;
    }

    .comp-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #FEF2F2; /* Light red tint */
        color: #DC2626;
        padding: 6px 16px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 20px;
        width: max-content;
    }
    
    .comp-label svg { width: 14px; height: 14px; }

    .comp-title {
        color: #111827;
        font-size: clamp(32px, 3.5vw, 46px);
        font-weight: 900;
        line-height: 1.2;
        margin: 0 0 20px 0;
        letter-spacing: -1px;
    }
    .comp-title .text-red { color: #E30613; }

    /* Custom Scrollable Description Box */
    .scrollable-desc-wrapper {
        position: relative;
        margin-bottom: 30px;
    }
    
    .scrollable-desc {
        max-height: 140px; /* Fixed height to enable scrolling */
        overflow-y: auto;
        padding-right: 20px;
        color: #4B5563;
        font-size: 16px;
        line-height: 1.7;
        text-align: justify;
    }

    /* Elegant Custom Scrollbar */
    .scrollable-desc::-webkit-scrollbar { width: 6px; }
    .scrollable-desc::-webkit-scrollbar-track { background: #F3F4F6; border-radius: 10px; }
    .scrollable-desc::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
    .scrollable-desc::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

    .comp-subtitle {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 25px;
    }
    .comp-subtitle::before {
        content: '';
        width: 3px;
        height: 20px;
        background: #E30613;
        border-radius: 2px;
    }

    /* 8 Mini Service Cards Grid */
    .mini-service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .mini-card {
        background: #FFFFFF;
        border: 1px solid #F3F4F6;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
    }
    .mini-card:hover {
        border-color: rgba(227, 6, 19, 0.2);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        transform: translateY(-2px);
    }
    
    .mc-icon {
        width: 32px; height: 32px;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        color: #E30613;
    }
    .mc-icon svg { width: 22px; height: 22px; }
    
    .mc-text {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        line-height: 1.3;
    }

    /* ================= RIGHT COLUMN ================= */
    .comp-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Image / 3D Graphic Area */
    .comp-graphic-area {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 350px;
        margin-bottom: 30px;
    }

    .comp-graphic-area img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.1); /* Slight scale to match reference depth */
    }

    /* Floating Location Badge */
    .location-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #FFFFFF;
        border: 1px solid #F3F4F6;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        padding: 10px 20px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        color: #111827;
        z-index: 5;
    }
    .location-badge svg { width: 14px; height: 14px; color: #E30613; }

    /* Unified Feature Box (Bottom Right) */
    .unified-feature-box {
        background: #FFFFFF;
        border: 1px solid #F3F4F6;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        padding: 30px 20px;
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }

    .feature-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fi-icon {
        width: 40px; height: 40px;
        margin-bottom: 12px;
        color: #E30613;
        display: flex; align-items: center; justify-content: center;
    }
    .fi-icon svg { width: 28px; height: 28px; }

    .fi-title {
        font-size: 13px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 5px 0;
    }

    .fi-desc {
        font-size: 11px;
        color: #6B7280;
        line-height: 1.4;
        margin: 0;
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1200px) {
        .mini-service-grid { grid-template-columns: repeat(2, 1fr); }
    }
    
    @media (max-width: 1024px) {
        .comp-container { flex-direction: column; }
        .comp-right { margin-top: 40px; }
        .comp-graphic-area { min-height: 300px; }
        .location-badge { bottom: -15px; right: 50%; transform: translateX(50%); }
    }
    
    @media (max-width: 768px) {
        .mini-service-grid { grid-template-columns: 1fr; }
        .unified-feature-box { flex-wrap: wrap; }
        .feature-item { flex: 0 0 calc(50% - 15px); margin-bottom: 20px; }
    }
    
    
    
    /* ================= 3. BOTTOM SCROLLABLE ROW ================= */
/* ================= 3. BOTTOM SCROLLABLE ROW ================= */
.ita-bottom-section {
    width: 100%;
    max-width: 1400px;         /* Caps the maximum width */
    margin: 40px auto 0 auto;  /* Top margin 40px, Left/Right Auto (centers it), Bottom 0 */
    overflow: hidden;          /* Prevents the whole page from stretching horizontally */
    padding: 0 20px;           /* Adds a safe breathing room on smaller screens */
}
.ita-bottom-header {
    text-align: center;
    margin-bottom: 40px;
}

.ita-bottom-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 15px 0;
}

/* Red underline effect for specific text */
.ita-underline {
    position: relative;
    display: inline-block;
}
.ita-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #E30613;
    border-radius: 2px;
}

.ita-bottom-header p {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- NEW SCROLLABLE CONTAINER --- */
.ita-scrollable-row {
    display: flex;
    flex-wrap: nowrap;          /* Forces items to stay in a single row */
    overflow-x: auto;           /* Enables horizontal scrolling */
    gap: 15px;
    padding-bottom: 20px;       /* Adds breathing room for the scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory;     /* Optional: makes scrolling snap to cards */
}

/* Customizing the Scrollbar for a cleaner look */
.ita-scrollable-row::-webkit-scrollbar {
    height: 8px;
}
.ita-scrollable-row::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}
.ita-scrollable-row::-webkit-scrollbar-thumb {
    background: #E30613;
    border-radius: 10px;
}

/* --- UPDATED CARD STYLES --- */
.ita-grid-card {
    flex: 0 0 200px; /* Crucial: Fixes the width of each card so they don't shrink */
    scroll-snap-align: start; /* Aligns cards nicely when scrolling stops */
    
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
}

.ita-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: rgba(227, 6, 19, 0.2);
}

.ita-gc-icon {
    width: 55px; 
    height: 55px;
    border-radius: 50%;
    background-color: rgba(227, 6, 19, 0.04); /* Very soft red tint matching your theme */
    border: 1px solid rgba(227, 6, 19, 0.15); /* Adds a subtle ring like your other sections */
    color: #E30613; /* Primary red */
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom: 15px;
}

.ita-gc-icon svg { 
    width: 24px; 
    height: 24px; 
    stroke-width: 1.5; 
}

.ita-grid-card p {
    font-size: 11.5px;
    font-weight: 700;
    color: #374151;
    line-height: 1.4;
    margin: 0;
}
    /* ======================================================
       IT CONSULTING OVERVIEW SECTION (IMAGE DESIGN MATCH)
       ====================================================== */
    .ita-section {
        background-color: #FAFAFA; /* Very subtle off-white background */
        background-image: 
            linear-gradient(rgba(227, 6, 19, 0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(227, 6, 19, 0.02) 1px, transparent 1px);
        background-size: 60px 60px; /* Faint grid matching the tech theme */
        padding: 100px 5%;
        position: relative;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .ita-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    /* ================= 1. TOP ROW ================= */
    .ita-top-row {
        display: flex;
        align-items: stretch;
        gap: 30px;
        justify-content: space-between;
    }

    /* Top Left: Text Content */
    .ita-left {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 20px;
    }

    .ita-label {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #E30613;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    .ita-label::before { content: ''; width: 40px; height: 1px; background: #E30613; }

    .ita-title {
        color: #111827;
        font-size: clamp(32px, 3.5vw, 48px);
        font-weight: 900;
        line-height: 1.2;
        margin: 0 0 25px 0;
        letter-spacing: -1px;
    }
    .ita-title .text-red { color: #E30613; }

    .ita-desc {
        color: #4B5563;
        font-size: 15px;
        line-height: 1.7;
        margin: 0 0 20px 0;
    }

    /* Top Center: Graphic Area */
    .ita-center-img {
        flex: 1.4;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .ita-center-img img {
        width: 100%;
        max-width: 550px;
        height: auto;
        object-fit: contain;
    }

    /* Top Right: Services Card */
    .ita-right-card {
        flex: 1;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 16px;
        padding: 35px 30px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.03);
        display: flex;
        flex-direction: column;
    }

    .ita-rc-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }
    .ita-rc-icon {
        width: 40px; height: 40px;
        background: #FFF5F5;
        color: #E30613;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .ita-rc-icon svg { width: 20px; height: 20px; stroke-width: 2; }
    
    .ita-rc-header h3 {
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        margin: 0;
    }

    .ita-right-card p {
        font-size: 13px;
        color: #6B7280;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .ita-service-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
    }

    .ita-service-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 15px;
        border: 1px solid #F3F4F6;
        border-radius: 50px; /* Pill shape from image */
        background: #FFFFFF;
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        transition: all 0.3s ease;
    }
    .ita-service-item:hover {
        border-color: rgba(227, 6, 19, 0.3);
        box-shadow: 0 4px 10px rgba(227, 6, 19, 0.05);
        color: #E30613;
    }
    .ita-service-item svg {
        width: 16px; height: 16px;
        color: #E30613;
        flex-shrink: 0;
    }

    /* ================= 2. MIDDLE BOX ================= */
    .ita-middle-box {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 16px;
        padding: 40px;
        display: flex;
        align-items: stretch;
        gap: 40px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    }

    .ita-mb-left {
        flex: 1;
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .ita-mb-icon {
        width: 60px; height: 60px;
        background: #FFF5F5;
        border-radius: 12px;
        color: #E30613;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .ita-mb-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }

    .ita-mb-text h3 {
        font-size: 20px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 12px 0;
        line-height: 1.3;
    }
    .ita-mb-text p {
        font-size: 13px;
        color: #6B7280;
        line-height: 1.6;
        margin: 0;
    }

    .ita-mb-divider {
        width: 1px;
        background: #E5E7EB;
        align-self: stretch;
    }

    .ita-mb-right {
        flex: 1.2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-content: center;
    }

    .ita-check-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        line-height: 1.4;
    }
    .ita-check-item svg {
        width: 18px; height: 18px;
        color: #E30613;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* ================= 3. BOTTOM GRID ================= */
    .ita-bottom-section {
        margin-top: 20px;
    }

    .ita-bottom-header {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .ita-bottom-header h2 {
        font-size: 28px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 15px 0;
    }

    /* Red underline effect for specific text */
    .ita-underline {
        position: relative;
        display: inline-block;
    }
    .ita-underline::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: #E30613;
        border-radius: 2px;
    }

    .ita-bottom-header p {
        color: #6B7280;
        font-size: 14px;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
    }

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

    .ita-grid-card {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 25px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.01);
    }
    .ita-grid-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        border-color: rgba(227, 6, 19, 0.2);
    }

    .ita-gc-icon {
        width: 50px; height: 50px;
        background: #FFF5F5;
        border-radius: 50%;
        color: #E30613;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 15px;
    }
    .ita-gc-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }

    .ita-grid-card p {
        font-size: 11.5px;
        font-weight: 700;
        color: #374151;
        line-height: 1.4;
        margin: 0;
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1300px) {
        .ita-top-row { flex-direction: column; align-items: center; }
        .ita-left, .ita-right-card { max-width: 800px; width: 100%; }
        .ita-grid-7 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    }

    @media (max-width: 992px) {
        .ita-middle-box { flex-direction: column; gap: 30px; }
        .ita-mb-divider { height: 1px; width: 100%; }
        .ita-grid-7 { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
        .ita-mb-right { grid-template-columns: 1fr; }
        .ita-grid-7 { grid-template-columns: repeat(2, 1fr); }
        .ita-bottom-header h2 { font-size: 24px; }
    }
    
    @media (max-width: 480px) {
        .ita-grid-7 { grid-template-columns: 1fr; }
    }
    
    /* Targets both the text links and the SVG icons */
.ita-service-item a,
.ita-service-item svg {
    color: #000000;
    text-decoration: none; /* Removes the default underline from links */
}

/* Optional: Add a hover effect so users know it's clickable */
.ita-service-item a:hover,
.ita-service-item:hover svg {
    color: #333333; /* Slightly lighter black/dark gray on hover */
}
    /* ======================================================
       MANAGED IT HERO SECTION (LIGHT THEME)
       ====================================================== */
    :root {
        --brand-red: #E30613;
        --brand-red-hover: #C50510;
        --text-dark: #111827;
        --text-muted: #4B5563;
        --bg-light: #F8F9FA;
        --white: #FFFFFF;
        --border-light: #E5E7EB;
    }

    .managed-hero-section {
        position: relative;
        background-color: var(--bg-light);
        min-height: 85vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 5% 40px;
        overflow: hidden;
        font-family: 'Inter', system-ui, sans-serif;
        z-index: 1;
    }

    /* Abstract Tech Grid Background (Faint) */
    .managed-hero-bg {
        position: absolute;
        inset: 0;
        background-image: 
            radial-gradient(circle at 75% 50%, rgba(227, 6, 19, 0.03) 0%, transparent 50%),
            linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
        background-size: 100% 100%, 30px 30px, 30px 30px;
        z-index: -1;
        pointer-events: none;
    }

    .managed-hero-container {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
        position: relative;
        z-index: 2;
    }

    /* ================= LEFT COLUMN (Content) ================= */
    .m-hero-content {
        flex: 1.1;
        max-width: 650px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Top Red Badge */
    .m-top-badge {
        display: flex;
        align-items: center;
        color: var(--brand-red);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    .m-badge-line {
        width: 25px;
        height: 2px;
        background-color: var(--brand-red);
        margin-right: 12px;
    }

    /* Main Typography */
    .m-hero-title {
        color: var(--text-dark);
        font-size: clamp(38px, 4.5vw, 60px);
        font-weight: 900;
        line-height: 1.15;
        margin: 0 0 15px 0;
        letter-spacing: -1px;
    }
    .m-hero-title .text-red {
        color: var(--brand-red);
    }
    
    .m-title-underline {
        width: 60px;
        height: 3px;
        background-color: var(--brand-red);
        margin-bottom: 25px;
        border-radius: 2px;
    }




/* ======================================================
   GRC DUAL CARDS SECTION (Scrollable Description Added)
   Namespace: slx-grc- (Zero conflict guarantee)
   No CSS Variables Used
   ====================================================== */

.slx-grc-section {
    padding: 60px 5%;
    background-color: #fcfcfc; 
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
}

.slx-grc-section * {
    box-sizing: border-box;
}

.slx-grc-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* --- Cards --- */
.slx-grc-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.slx-grc-card-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #e30613;
    border-radius: 0 0 4px 4px;
}

/* --- Headers inside cards --- */
.slx-grc-header-area {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.slx-grc-hero-image {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slx-grc-hero-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateZ(0);
}

.slx-grc-header-content {
    flex: 1;
}

.slx-grc-top-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
}

.slx-grc-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.slx-grc-text-red {
    color: #e30613;
}

/* Updated Scrollable Description */
.slx-grc-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    max-height: 95px; /* Restricts height to approx 4 lines */
    overflow-y: auto; /* Enables vertical scrolling */
    padding-right: 12px; /* Breathing room for scrollbar */
}

/* --- Divider line before lists --- */
.slx-grc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #0f172a;
}

.slx-grc-divider-line {
    width: 3px;
    height: 16px;
    background-color: #e30613;
    border-radius: 2px;
}

/* --- Scrollable Area (Lists) --- */
.slx-grc-scroll-area {
    max-height: 290px;
    overflow-y: auto;
    padding-right: 12px;
    margin-right: -12px;
}

/* Custom Webkit Scrollbar shared by both list and description areas */
.slx-grc-scroll-area::-webkit-scrollbar,
.slx-grc-desc::-webkit-scrollbar {
    width: 6px;
}
.slx-grc-scroll-area::-webkit-scrollbar-track,
.slx-grc-desc::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 10px;
}
.slx-grc-scroll-area::-webkit-scrollbar-thumb,
.slx-grc-desc::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.slx-grc-scroll-area::-webkit-scrollbar-thumb:hover,
.slx-grc-desc::-webkit-scrollbar-thumb:hover {
    background: #e30613;
}

/* --- Left Card Grid List --- */
.slx-grc-grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.slx-grc-grid-item {
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
}

.slx-grc-grid-item:hover {
    border-color: #e30613;
}

.slx-grc-item-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(227, 6, 19, 0.05);
    border: 1px solid rgba(227, 6, 19, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slx-grc-item-icon svg {
    width: 18px;
    height: 18px;
}

.slx-grc-item-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
}

/* --- Right Card Vertical List --- */
.slx-grc-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slx-grc-list-item {
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.slx-grc-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.slx-grc-list-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slx-grc-list-separator {
    width: 1px;
    height: 24px;
    background-color: #e2e8f0;
    margin: 0 16px;
}

/* --- Right Card Footer Text --- */
.slx-grc-footer-text {
    margin: 24px 0 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    .slx-grc-title {
        font-size: 1.4rem;
    }
    
    .slx-grc-header-area {
        flex-direction: column;
        text-align: center;
    }
    
    .slx-grc-header-reverse {
        flex-direction: column-reverse;
    }

    .slx-grc-hero-image {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .slx-grc-top-icon {
        margin: 0 auto 16px auto;
    }

    .slx-grc-desc {
        text-align: justify; /* Keeps text neat while scrolling */
    }
}

@media (max-width: 992px) {
    .slx-grc-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .slx-grc-card {
        padding: 24px;
    }
    
    .slx-grc-grid-list {
        grid-template-columns: 1fr;
    }
    
    .slx-grc-scroll-area {
        max-height: 350px; 
    }
    
    .slx-grc-desc {
        max-height: 85px; /* Slightly tighter on mobile */
    }
}


/* ======================================================
   PREMIUM GRC APPROACH SECTION
   Namespace: slx-approach- (Zero conflict guarantee)
   No CSS Variables Used
   ====================================================== */

.slx-approach-section {
    position: relative;
    background-color: #ffffff;
    padding: 100px 5%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    z-index: 1;
}

.slx-approach-section * {
    box-sizing: border-box;
}

.slx-approach-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Header Styling --- */
.slx-approach-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 70px auto;
}

.slx-approach-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #475569;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.slx-approach-dot {
    width: 6px;
    height: 6px;
    background-color: #e30613;
    border-radius: 50%;
    box-shadow: 0 0 8px #e30613;
}

.slx-approach-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    color: #0a0f18;
    margin: 0 0 20px 0;
    letter-spacing: -0.03em;
}

.slx-approach-text-red {
    color: #e30613;
}

.slx-approach-lead {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* --- Grid & Pathway Styling --- */
.slx-approach-grid {
    display: grid;
    /* Auto-fit creates columns automatically based on screen size */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    position: relative;
}

/* The horizontal connecting line across the top of cards */
.slx-approach-grid::before {
    content: '';
    position: absolute;
    top: 36px; /* Aligns with the nodes */
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(to right, rgba(227, 6, 19, 0.1) 0%, #e30613 50%, rgba(227, 6, 19, 0.1) 100%);
    z-index: 0;
}

/* --- Individual Step Cards --- */
.slx-approach-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 40px 24px 30px 24px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(10, 15, 24, 0.02);
}

.slx-approach-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 15, 24, 0.06);
    border-color: rgba(227, 6, 19, 0.3);
}

/* Red top accent line on hover */
.slx-approach-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e30613;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.slx-approach-card:hover::after {
    transform: scaleX(1);
}

/* Connecting Node on each card */
.slx-approach-node {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 2px solid #e30613;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s ease;
}

.slx-approach-card:hover .slx-approach-node {
    background-color: #e30613;
    box-shadow: 0 0 15px rgba(227, 6, 19, 0.5);
}

/* Large Background Numbers (01, 02...) */
.slx-approach-bg-num {
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(10, 15, 24, 0.03);
    z-index: -1;
    transition: color 0.4s ease;
    pointer-events: none;
}

.slx-approach-card:hover .slx-approach-bg-num {
    color: rgba(227, 6, 19, 0.05);
}

/* Icons */
.slx-approach-icon {
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto 24px auto; /* Margin pushes it below the connection line */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.slx-approach-card:hover .slx-approach-icon {
    border-color: #e30613;
    background-color: rgba(227, 6, 19, 0.02);
}

.slx-approach-icon svg {
    width: 24px;
    height: 24px;
}

/* Typography inside cards */
.slx-approach-step-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0a0f18;
    text-align: center;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.slx-approach-step-desc {
    font-size: 0.9rem;
    color: #475569;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .slx-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hide the horizontal line on smaller grids because cards wrap and it looks messy */
    .slx-approach-grid::before {
        display: none;
    }
    
    .slx-approach-node {
        display: none; /* Hide nodes when line is gone */
    }
    
    .slx-approach-icon {
        margin-top: 10px; /* Adjust top margin since node is gone */
    }
}

@media (max-width: 600px) {
    .slx-approach-grid {
        grid-template-columns: 1fr;
    }
    
    .slx-approach-card {
        padding: 30px 20px;
    }
}
    
    
    /* ======================================================
   PREMIUM LIGHT CTA SECTION
   Namespace: slx-cta- (Zero conflict guarantee)
   No CSS Variables Used
   ====================================================== */

.slx-cta-section {
    position: relative;
    background-color: #f8fafc; /* Very soft premium gray/off-white */
    padding: 100px 5%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    z-index: 1;
}

.slx-cta-section * {
    box-sizing: border-box;
}

/* Ambient Red Glow in the Background (Softened for light theme) */
.slx-cta-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.03) 0%, transparent 60%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.slx-cta-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

/* --- Left Column: Features --- */
.slx-cta-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.slx-cta-feature {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.slx-cta-icon-box {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border: 1px solid rgba(227, 6, 19, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #e30613;
    box-shadow: 0 8px 20px rgba(227, 6, 19, 0.05);
}

.slx-cta-icon-box svg {
    width: 28px;
    height: 28px;
}

.slx-cta-text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a; /* Dark slate */
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.slx-cta-text p {
    font-size: 1.05rem;
    color: #475569; /* Medium slate gray for readability */
    line-height: 1.7;
    margin: 0;
}

/* --- Right Column: Action Card --- */
.slx-cta-action-card {
    background: #ffffff; /* Pure white */
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); /* Soft dark shadow */
    overflow: hidden;
}

/* Internal Card Red Glow (Softened) */
.slx-cta-action-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(227, 6, 19, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.slx-cta-card-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #e30613;
    border-radius: 0 0 4px 4px;
}

.slx-cta-card-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 16px 0;
    letter-spacing: -0.03em;
}

.slx-cta-card-desc {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

/* --- Buttons --- */
.slx-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slx-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.slx-cta-btn svg {
    width: 20px;
    height: 20px;
}

/* Primary Button (Solid Red) */
.slx-cta-btn-primary {
    background-color: #e30613;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(227, 6, 19, 0.15);
}

.slx-cta-btn-primary:hover {
    background-color: #b90510;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(227, 6, 19, 0.2);
}

/* Secondary Button (Outline for light theme) */
.slx-cta-btn-secondary {
    background-color: #ffffff;
    color: #0f172a; /* Dark text */
    border: 1px solid #cbd5e1; /* Gray border */
}

.slx-cta-btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-2px);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .slx-cta-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .slx-cta-action-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .slx-cta-section {
        padding: 80px 5%;
    }

    .slx-cta-feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .slx-cta-action-card {
        padding: 40px 20px;
    }

    .slx-cta-card-title {
        font-size: 1.8rem;
    }
}

/* ==========================
   FULL WIDTH CYBER PARTNER
========================== */

.sl-cyber-partner-wrap{
    width:100%;
    padding:90px 6%;
    position:relative;
    overflow:hidden;
    background:
        #fff;
}

/* Background Glow Effects */
.sl-cyber-partner-wrap::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(227,6,19,.12);
    border-radius:50%;
    top:-250px;
    right:-150px;
    filter:blur(80px);
}

.sl-cyber-partner-wrap::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-200px;
    left:-100px;
    filter:blur(100px);
}

.sl-cyber-partner-box{
    max-width:1600px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
    position:relative;
    z-index:2;
}

.sl-cyber-brand{
    min-width:240px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sl-cyber-brand img{
    max-width:220px;
    width:100%;
    background:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.sl-cyber-content{
    max-width:850px;
}

.sl-cyber-tag{
    display:inline-block;
    background:rgba(227,6,19,.15);
    color:#ff4d59;
    padding:10px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:25px;
}

.sl-cyber-content h2{
    color:#00000;
    font-size:clamp(32px,4vw,56px);
    line-height:1.15;
    font-weight:900;
    margin-bottom:25px;
}

.sl-cyber-content p{
    color:#00000;
    font-size:17px;
    line-height:1.9;
    margin:0;
}

/* ================= PDPL SELF ASSESSMENT WORKBOOK SECTION ================= */

.pdpl-workbook-section {
position: relative;
padding: 100px 5%;
background: linear-gradient(135deg, #ffffff 0%, #fff7f8 45%, #f8f9fb 100%);
overflow: hidden;
}

.pdpl-workbook-section::before {
content: "";
position: absolute;
top: -130px;
left: -120px;
width: 330px;
height: 330px;
background: rgba(227, 6, 19, 0.07);
border-radius: 50%;
pointer-events: none;
}

.pdpl-workbook-section::after {
content: "";
position: absolute;
bottom: -120px;
right: -120px;
width: 280px;
height: 280px;
background: rgba(227, 6, 19, 0.06);
border-radius: 50%;
pointer-events: none;
}

.pdpl-workbook-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.pdpl-workbook-wrapper {
display: grid;
grid-template-columns: 1.35fr 0.75fr;
gap: 45px;
align-items: stretch;
}

.pdpl-workbook-content {
background: #ffffff;
border: 1px solid rgba(227, 6, 19, 0.12);
border-radius: 28px;
padding: 48px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
}

.pdpl-workbook-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 7px;
height: 100%;
background: #E30613;
}

.pdpl-workbook-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #E30613;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 18px;
}

.pdpl-workbook-label span {
width: 34px;
height: 2px;
background: #E30613;
display: inline-block;
}

.pdpl-workbook-title {
font-size: 42px;
line-height: 1.18;
color: #111827;
font-weight: 900;
margin: 0 0 18px 0;
}

.pdpl-workbook-title .text-red {
color: #E30613;
}

.pdpl-workbook-lead {
font-size: 20px;
line-height: 1.6;
color: #111827;
font-weight: 800;
margin: 0 0 12px 0;
}

.pdpl-workbook-desc {
font-size: 16px;
line-height: 1.8;
color: #4b5563;
max-width: 950px;
margin: 0 0 34px 0;
text-align: justify;
}

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

.pdpl-workbook-check-item {
background: #f8f9fb;
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 16px;
padding: 17px 18px;
display: flex;
align-items: center;
gap: 14px;
color: #111827;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
transition: all 0.3s ease;
}

.pdpl-workbook-check-item:hover {
background: #ffffff;
border-color: rgba(227, 6, 19, 0.25);
box-shadow: 0 12px 28px rgba(227, 6, 19, 0.08);
transform: translateY(-4px);
}

.pdpl-workbook-check-item span {
width: 36px;
height: 36px;
border-radius: 12px;
background: rgba(227, 6, 19, 0.10);
color: #E30613;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
flex-shrink: 0;
}

.pdpl-workbook-form-box {
background: #111827;
border-radius: 28px;
padding: 38px 34px;
box-shadow: 0 22px 60px rgba(17, 24, 39, 0.18);
position: relative;
overflow: hidden;
}

.pdpl-workbook-form-box::before {
content: "";
position: absolute;
top: -70px;
right: -70px;
width: 170px;
height: 170px;
background: rgba(227, 6, 19, 0.45);
border-radius: 50%;
}

.pdpl-workbook-form-box::after {
content: "";
position: absolute;
bottom: -65px;
left: -65px;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
}

.pdpl-workbook-form-header {
position: relative;
z-index: 2;
margin-bottom: 26px;
}

.pdpl-workbook-form-icon {
width: 60px;
height: 60px;
border-radius: 18px;
background: #E30613;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-shadow: 0 12px 25px rgba(227, 6, 19, 0.35);
}

.pdpl-workbook-form-icon svg {
width: 30px;
height: 30px;
stroke-width: 1.8;
}

.pdpl-workbook-form-header h3 {
color: #ffffff;
font-size: 26px;
font-weight: 900;
line-height: 1.3;
margin: 0 0 10px 0;
}

.pdpl-workbook-form-header p {
color: #d1d5db;
font-size: 15px;
line-height: 1.7;
margin: 0;
}

.pdpl-workbook-form {
position: relative;
z-index: 2;
}

.pdpl-form-group {
margin-bottom: 14px;
}

.pdpl-form-group input,
.pdpl-form-group textarea {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
padding: 15px 16px;
border-radius: 12px;
font-size: 14px;
font-family: inherit;
outline: none;
transition: all 0.3s ease;
}

.pdpl-form-group input::placeholder,
.pdpl-form-group textarea::placeholder {
color: #cbd5e1;
}

.pdpl-form-group input:focus,
.pdpl-form-group textarea:focus {
border-color: rgba(227, 6, 19, 0.8);
background: rgba(255, 255, 255, 0.12);
}

.pdpl-form-group textarea {
resize: vertical;
min-height: 105px;
}

.pdpl-workbook-btn {
width: 100%;
border: none;
background: #E30613;
color: #ffffff;
padding: 16px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.3px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
margin-top: 6px;
}

.pdpl-workbook-btn:hover {
background: #b90510;
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(227, 6, 19, 0.30);
}

@media (max-width: 1100px) {
.pdpl-workbook-wrapper {
grid-template-columns: 1fr;
}

.pdpl-workbook-form-box {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

}

@media (max-width: 767px) {
.pdpl-workbook-section {
padding: 60px 5%;
}

.pdpl-workbook-content {
    padding: 34px 26px;
}

.pdpl-workbook-title {
    font-size: 30px;
}

.pdpl-workbook-lead {
    font-size: 18px;
}

.pdpl-workbook-checklist {
    grid-template-columns: 1fr;
}

.pdpl-workbook-form-box {
    padding: 32px 24px;
}

.pdpl-workbook-form-header h3 {
    font-size: 22px;
}

}


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

    .sl-cyber-partner-box{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .sl-cyber-brand{
        min-width:auto;
    }

    .sl-cyber-brand img{
        max-width:180px;
    }

    .sl-cyber-content h2{
        font-size:34px;
    }

    .sl-cyber-content p{
        font-size:16px;
    }
}