/* IT Services v2 – Public Frontend */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.7.0/dist/tabler-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

.its-wrap *, .its-wrap *::before, .its-wrap *::after { box-sizing: border-box; }

.its-wrap {
    display: flex;
    gap: 24px;
    font-family: 'DM Sans', sans-serif;
    padding: 16px 0;
    align-items: flex-start;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.its-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.its-sidebar-card { background: #fff; border: 1px solid #eaecf0; border-radius: 16px; overflow: hidden; }

/* Nav */
.its-nav-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; padding: 16px 18px 8px; margin: 0; }
.its-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; font-size: 14px; font-family: 'DM Sans', sans-serif; font-weight: 400; color: #374151; background: transparent; border: none; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.its-nav-item .ti { font-size: 16px; color: #9ca3af; transition: color .15s; }
.its-nav-item:hover { background: #f9fafb; }
.its-nav-item.active { background: #1B2B5E; color: #fff; border-radius: 10px; margin: 3px 10px; padding: 10px 12px; width: calc(100% - 20px); font-weight: 500; }
.its-nav-item.active .ti { color: #93c5fd; }

/* Featured image */
.its-img-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.its-img-placeholder-box { width: 100%; height: 160px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.its-img-placeholder-box .ti { font-size: 32px; color: #cbd5e1; }

/* Contact */
.its-contact-title { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0; padding: 16px 18px 10px; }
.its-contact-box { background: #f8fafc; margin: 0 14px 14px; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.its-contact-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #4b5563; line-height: 1.5; }
.its-contact-row .ti { font-size: 16px; color: #1B2B5E; flex-shrink: 0; margin-top: 2px; }

/* ── Main ─────────────────────────────────────────────────────── */
.its-main { flex: 1; min-width: 0; }
.its-heading { font-size: 28px; font-weight: 600; color: #0f172a; margin: 0 0 8px; line-height: 1.25; transition: opacity .15s; }
.its-subheading { font-size: 15px; color: #6b7280; margin: 0 0 20px; line-height: 1.6; transition: opacity .15s; }

/* Service cards */
.its-service-list { display: flex; flex-direction: column; gap: 10px; }
.its-service-card { display: flex; align-items: center; gap: 14px; background: #f8fafc; border: 1px solid #eaecf0; border-radius: 14px; padding: 14px 16px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .15s; }
.its-service-card:hover { border-color: #c7d2fe; box-shadow: 0 2px 12px rgba(27,43,94,.08); transform: translateY(-1px); }
.its-svc-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: #fff; border: 1px solid #eaecf0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.its-svc-icon img { width: 32px; height: 32px; object-fit: contain; }
.its-svc-icon .ti { font-size: 22px; color: #1B2B5E; }
.its-svc-text { flex: 1; min-width: 0; }
.its-svc-text strong { display: block; font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 3px; }
.its-svc-text span { font-size: 13px; color: #6b7280; line-height: 1.5; }
.its-svc-arrow { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, border-color .2s; }
.its-service-card:hover .its-svc-arrow { background: #1B2B5E; border-color: #1B2B5E; }
.its-svc-arrow .ti { font-size: 15px; color: #6b7280; transition: color .2s; }
.its-service-card:hover .its-svc-arrow .ti { color: #fff; }
.its-empty-services { color: #9ca3af; text-align: center; padding: 40px 0; font-size: 14px; }

/* Transition classes for JS switching */
.its-fade-out { opacity: 0; transform: translateY(4px); }
.its-fade-in  { opacity: 1; transform: translateY(0); transition: opacity .2s, transform .2s; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) { .its-wrap { flex-direction: column; } .its-sidebar { width: 100%; } }
@media (max-width: 480px) { .its-heading { font-size: 22px; } .its-service-card { gap: 10px; padding: 12px; } .its-svc-icon { width: 40px; height: 40px; } }