/* ============================================================
   Insyssky.com  |  site.css
   Shared / extracted styles — all pages
   ============================================================ */

/* ── Logo animation container (CreateJS / Animate CC) ────────
   Styles injected by JS; defining here removes inline attrs    */
#animation_container {
    background-color: transparent !important;
    width: 243px;
    height: 94px;
    position: relative;
    display: inline-block;
}
#canvas {
    position: absolute;
    display: block;
    background-color: transparent !important;
}
#dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    width: 243px;
    height: 94px;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

/* ── Header top bar ─────────────────────────────────────────── */
.header-tel-wrap { padding-left: 7%; }

/* ── Page hero section (service pages, contact) ─────────────── */
.page-hero {
    background: #1A2980;
    background: -webkit-linear-gradient(to right, #26D0CE, #1A2980);
    background: linear-gradient(to right, #26D0CE, #1A2980);
}
.page-hero-body {
    padding-top: 50px;
    padding-bottom: 30px;
}
.page-hero-text { text-align: justify; }

/* ── Home hero background ────────────────────────────────────── */
.home-hero-bg { background-image: url('../images/hero-banner.jpg'); }

/* ── CTA button (new service pages) ─────────────────────────── */
.btn-primary-cta {
    background: #11998e;            /* matches .primary-button on home page */
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    margin-top: 20px;
    transition: background 0.2s;
}
.btn-primary-cta:hover { background: #0a7a6a; color: #fff; opacity: 1; }
.service-cta-wrap { margin-top: 30px; }

/* ── Button utilities ────────────────────────────────────────── */
.btn-full { width: 100%; margin-left: 0; }

/* ── Text utilities ──────────────────────────────────────────── */
.text-brand-orange { color: #fb5d00; }
.text-dark-333     { color: #333333; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL CONTENT TYPOGRAPHY  —  Matches home page colour palette
   Applies to all service pages, company pages, contact pages
   ══════════════════════════════════════════════════════════════ */

/* Section headings – match h2.main (darkslategray) on home page */
.page-hero-text h2,
.page-hero-text h3,
.page-hero-text h4,
.page-hero-body h2,
.page-hero-body h3,
.section-content h2,
.section-content h3,
.section-content h4,
.svc-intro-heading,
.svc-section-title,
.svc-card h3,
.approach-step-body h4,
.approach-visual h3,
.section-heading,
.mv-card h3 {
    color: darkslategray;           /* #2F4F4F — same as h2.main on home */
    font-family: 'Pathway Gothic One', sans-serif;
}

/* Teal span highlights inside headings — matches home page accent */
.page-hero-text h2 span,
.page-hero-text h3 span,
.section-heading span,
.svc-intro-heading span {
    color: #11998e;
}

/* Body paragraphs – match p.main (slategray) on home page */
.page-hero-text p,
.page-hero-text > p,
.section-content p,
.svc-intro-text,
.svc-card p,
.approach-step-body p,
.section-lead,
.svc-section-lead,
.about-section p,
.mv-card p {
    color: slategray;               /* #708090 — same as p.main on home */
    font-family: 'Roboto', sans-serif;
    line-height: 1.8;
}

/* List items – match ul.why-choose-uls (#444444) on home page */
.page-hero-text ul li,
.page-hero-text ol li,
.section-content ul li,
.svc-intro-check li,
.highlight-list li {
    color: #444444;                 /* same as why-choose-uls on home */
    font-family: 'Roboto', sans-serif;
    font-size: 0.97rem;
    line-height: 1.75;
}

/* Strong/bold inside list items and paragraphs — dark for contrast */
.page-hero-text ul li strong,
.page-hero-text p strong,
.section-content ul li strong,
.section-content p strong {
    color: darkslategray;
    font-weight: 700;
}

/* Accent color for <b> tags inside content — teal, matching .clients b */
.page-hero-text b,
.section-content b,
.clients b {
    color: #11998e;
}

/* List bullets on service pages — orange dots matching home page */
.page-hero-text ul {
    list-style: none;
    padding-left: 0;
}
.page-hero-text ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}
.page-hero-text ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.page-hero-text ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #fb5d00;                 /* orange bullet — matches home page */
    font-size: 0.8rem;
}

/* h3 sub-headings in service page content */
.page-hero-text h3 {
    font-size: 1.45rem;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

/* Section tag labels (teal pill badges) — matches home page teal accent */
.section-tag,
.svc-intro-tag,
.svc-section-label {
    color: #11998e;
    background: #e6f4f1;
}

/* ── End Global Content Typography ─────────────────────────── */

/* ── Contact page ────────────────────────────────────────────── */
.contact-map-section { padding-top: 30px; padding-bottom: 30px; }
.map-iframe          { border: 0; width: 100%; }
.contact-form-col    { padding-left: 0; }

/* ── Startup cards — Our Startups page ──────────────────────────
/* ── Startup Page Custom Styles ── */
        .startup-hero {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            /* push content below the fixed header (~130px) */
            padding: 220px 0 56px;
            color: #fff;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .startup-hero::before {
            content: '';
            position: absolute; inset: 0;
            background: 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='%23ffffff' fill-opacity='0.03'%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");
        }
        .startup-hero h1 { font-size:2.8rem; font-weight:800; margin-bottom:10px; position:relative; }
        .startup-hero .hero-sub { font-size:1.15rem; opacity:0.85; max-width:620px; margin:0 auto 20px; position:relative; }
        .hero-badges > span {
            display:inline-block;
            background:rgba(255,255,255,0.12);
            border:1px solid rgba(255,255,255,0.25);
            border-radius:50px; padding:5px 16px; font-size:0.82rem; margin:4px;
            backdrop-filter:blur(4px);
        }

        /* ── Stats Bar ── */
        .stats-bar { background:#fb5d00; padding:22px 0; }
        .stats-bar .stat-item { text-align:center; color:#fff; border-right:1px solid rgba(255,255,255,0.2); }
        .stats-bar .stat-item:last-child { border-right:none; }
        .stats-bar .stat-num {
            font-size:2rem; font-weight:800; line-height:1;
            background:linear-gradient(90deg,#ffffff,#fff);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .stats-bar .stat-label { font-size:0.78rem; opacity:0.8; margin-top:3px; }

        /* ── Startup Cards ── */
        .startups-section { background:#f4f6fb; padding:60px 0 80px; }
        .section-tag { text-align:center; margin-bottom:40px; }
        .section-tag h2 { font-size:2rem; font-weight:800; color:#0f0c29; }
        .section-tag p { color:#666; font-size:1rem; }

        .startup-card {
            background:#fff; border-radius:28px; overflow:hidden;
            box-shadow:0 6px 32px rgba(0,0,0,0.08); margin-bottom:36px;
            transition:transform 0.3s ease, box-shadow 0.3s ease;
            display:flex; flex-direction:column;
            border:1px solid rgba(0,0,0,0.06);
        }
        .startup-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.13); }

        .card-banner { height:8px; }
        .card-body-inner { padding:26px 26px 22px; flex:1; display:flex; flex-direction:column; }
        .card-logo-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
        .card-icon {
            width:64px; height:64px; border-radius:10px;
            overflow:hidden; flex-shrink:0;
            background:#fff; border:1px solid rgba(0,0,0,0.09);
            box-shadow:0 2px 10px rgba(0,0,0,0.10);
            display:flex; align-items:center; justify-content:center;
        }
        .card-icon img { width:100%; height:100%; object-fit:cover; display:block; }
        .card-name { font-size:1.45rem; font-weight:800; line-height:1.2; }
        .card-tagline { font-size:0.82rem; color:#888; margin-top:2px; }
        .card-desc { font-size:0.95rem; color:#444; line-height:1.7; margin-bottom:18px; flex:1; }
        .card-tags { margin-bottom:18px; }
        .card-tag {
            display:inline-block; padding:3px 12px; border-radius:50px;
            font-size:0.75rem; font-weight:600; margin:0 6px 8px 0;
        }
        .card-metrics { display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
        .metric-box { background:#f4f6fb; border-radius:10px; padding:8px 14px; flex:1; min-width:80px; text-align:center; }
        .metric-box .mval { font-size:1.1rem; font-weight:800; color:#1a2980; }
        .metric-box .mlabel { font-size:0.7rem; color:#888; }
        .card-footer-row { display:flex; align-items:center; gap:10px; }
        .btn-visit {
            display:inline-flex; align-items:center; gap:7px;
            padding:11px 24px; border-radius:50px; font-size:0.92rem; font-weight:700;
            color:#fff !important; text-decoration:none !important;
            transition:opacity 0.2s,transform 0.2s; flex:1; justify-content:center;
        }
        .btn-visit:hover { opacity:0.88; transform:scale(1.03); }
        .badge-award {
            border-radius:50px; padding:5px 12px;
            font-size:0.72rem; font-weight:700; white-space:nowrap;
        }

        /* ══ Brand-accurate colour themes ══════════════════════════ */

        /* TalkEng – Lime green + red (brand: green T logo, lime marquee) */
        .theme-talkeng .card-banner { background:linear-gradient(90deg,#1DB954,#1DB954); }
                .theme-talkeng .card-name   { color:#18A247; }
        .theme-talkeng .card-tag    { background:#e6f7ec; color:#18A247; border:1px solid #b2dfc0; }
        .theme-talkeng .btn-visit   { background:linear-gradient(135deg,#18A247,#1DB954); }
        .theme-talkeng .badge-award { background:linear-gradient(90deg,#18A247,#18A247); color:#ffffff; }
        .theme-talkeng .metric-box .mval { color:#18A247; }

        /* OraRide – bold orange-black (ride-hailing brand) */
        .theme-oraride .card-banner { background:linear-gradient(90deg,#0F0E0A,#0F0E0A); }
                .theme-oraride .card-name   { color:#0F0E0A; }
        .theme-oraride .card-tag    { background:#f0ede8; color:#3a3830; border:1px solid #c8c4bc; }
        .theme-oraride .btn-visit   { background:linear-gradient(135deg, #0F0E0A,#0F0E0A); }
        .theme-oraride .badge-award { background:linear-gradient(90deg,#1a1a1a,#333); color:#0F0E0A; }
        .theme-oraride .metric-box .mval { color:#0F0E0A; }

        /* Tripura News – red + black (brand: red rectangle logo) */
        .theme-news .card-banner { background:linear-gradient(90deg,#D32F2F,#FF1744); }
                .theme-news .card-name   { color:#C62828; }
        .theme-news .card-tag    { background:#fde8e8; color:#C62828; border:1px solid #f5b8b8; }
        .theme-news .btn-visit   { background:linear-gradient(135deg,#C62828,#FF1744); }
        .theme-news .badge-award { background:linear-gradient(90deg,#1a1a1a,#333); color:#FF4444; }
        .theme-news .metric-box .mval { color:#C62828; }

        /* L.AI.RRY – cream bg, coral/red-orange accent (brand: warm cream + coral) */
        .theme-lairy .card-banner { background:linear-gradient(90deg,#ff6b6b,#ff6b6b); }
                .theme-lairy .card-name   { color:#ff6b6b; }
        .theme-lairy .card-tag    { background:#fff0f0; color:#d94f4f; border:1px solid #f5c0c0; }
        .theme-lairy .btn-visit   { background:linear-gradient(135deg,#ff6b6b,#ff6b6b); }
        .theme-lairy .badge-award { background:linear-gradient(90deg,#ff6b6b,#ff6b6b); color:#fff; }
        .theme-lairy .metric-box .mval { color:#ff6b6b; }
        .theme-lairy { background:#ffffff; }

        /* SKMI School – purple/maroon + gold (brand: "Shree Krishna Mission") */
        .theme-skmi .card-banner { background:linear-gradient(90deg,#6B2C7A,#6B2C7A); }
                .theme-skmi .card-name   { color:#6B2C7A; }
        .theme-skmi .card-tag    { background:#f4eaf7; color:#6B2C7A; border:1px solid #d9b8e3; }
        .theme-skmi .btn-visit   { background:linear-gradient(135deg,#6B2C7A,#9C27B0); }
        .theme-skmi .badge-award { background:linear-gradient(90deg,#6B2C7A,#6B2C7A); color:#333; }
        .theme-skmi .metric-box .mval { color:#6B2C7A; }

        @media(max-width:768px){
            .startup-hero { padding-top:160px; }
            .startup-hero h1 { font-size:1.9rem; }
            .stats-bar .stat-num { font-size:1.4rem; }
            .stats-bar .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.15); padding:10px 0; }
        }
/* ─────────────────────────────────────────────────────────────── */

/* ── Additional utilities extracted from inline styles ───────── */

/* canvas already handled by #canvas ID rule above */
.canvas-logo { position: absolute; display: block; background-color: transparent !important; }

/* Index page hero section */
.hero-text-center    { text-align: center; }
.hero-heading-lg     { font-size: 50px; padding-top: 20px; }
.hero-badge-text     { font-size: 40px; text-transform: uppercase; }
.hero-subtext        { text-align: center; margin-top: 40px; }
.hero-mt-zero        { margin-top: 0; }
.hero-mb-zero        { margin-bottom: 0; }
.hero-section-pt     { padding-top: 30px; padding-bottom: 0; }
.hero-content-px     { padding-left: 50px; padding-right: 50px; }
.hero-img-pad        { padding: 30px; }
.hero-heading-pb     { padding-bottom: 20px; }
.clients-mt          { margin-top: 30px; }
.figure-center       { text-align: center; vertical-align: middle; }

/* Icon pixel nudges (index page service icons) */
.icon-nudge-pb5      { padding-bottom: 5px; padding-left: 1px; }
.icon-nudge-pl7      { padding-left: 7px; }
.icon-nudge-ml2      { margin-left: -2px; margin-top: -2px; }
.icon-nudge-ml5      { margin-left: -5px; margin-bottom: -3px; }
.icon-nudge-ml3      { margin-left: -3px; }
.icon-nudge-ml4      { margin-left: -4px; }

/* Startup page — card image fill */
.card-img-fill       { width: 100%; height: 100%; object-fit: cover; }

/* Startup page — L.AI.RRY custom visit button */
.btn-lairy-visit     { background: linear-gradient(135deg, #360033, #0b8793); }

/* Startup page — CTA card (dark gradient) */
.startup-cta-card {
    background: linear-gradient(135deg, #0f0c29, #302b63);
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 380px;
}
.startup-cta-inner   { justify-content: center; align-items: center; }
.startup-cta-icon    { font-size: 3rem; margin-bottom: 16px; }
.startup-cta-heading { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
.startup-cta-text    { opacity: 0.82; font-size: 0.95rem; margin-bottom: 24px; }
.startup-cta-btn {
    display: inline-block;
    background: linear-gradient(90deg, #26D0CE, #4776E6);
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
}

/* ── Floating scroll-animated badge — visible on top, never blocks scroll ── */
.logoI { pointer-events: none !important; cursor: default !important; }
.logoR { pointer-events: none !important; }

/* ── WhatsApp Floating Button ─────────────────────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37,211,102,0.45);
    text-decoration: none;
    animation: wa-pulse 2.2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(37,211,102,0.65);
    animation: none;
}
.wa-float i {
    color: #fff;
    font-size: 30px;
    line-height: 1;
}
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
    50%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ── Hide skrollr dice animation on tablet & mobile ───────────────────── */
@media (max-width: 1024px) {
  .logo_is { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   Shared About / Company page styles (about-us + testimonials)
   ════════════════════════════════════════════════════════ */

/* Teal stats bar — used on About Us & Testimonials */
.stats-bar-teal {
  background: linear-gradient(90deg, #fb5d00, #fb5d00);
  padding: 0;
}
.stats-bar-teal .stat-item {
  text-align: center;
  color: #fff;
  padding: 22px 10px;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.stats-bar-teal .stat-item:last-child { border-right: none; }
.stats-bar-teal .stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.stats-bar-teal .stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .stats-bar-teal .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 14px 0;
  }
}

/* Section pill tag */
.tag-pill {
  display: inline-block;
  background: #e6f4f1;
  color: #11998e;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* Section divider underline */
.section-divider {
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, #11998e, #26D0CE);
  border-radius: 2px;
  margin: 14px 0 24px;
}
.section-divider.mx-auto { margin-left: auto; margin-right: auto; }

/* CTA band — shared by About Us & Testimonials */
.about-cta-band {
  background: linear-gradient(135deg, #0f0c29 0%, #11998e 100%);
  padding: 64px 0;
  text-align: center;
}
.about-cta-band h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.about-cta-band p {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

/* Shared CTA buttons */
.btn-cta-white {
  background: #fff;
  color: #11998e;
  padding: 13px 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  margin: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.2); color: #0a7a6a; }
.btn-cta-outline-white {
  border: 2px solid rgba(255,255,255,0.7);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  margin: 6px;
  transition: all 0.2s;
}
.btn-cta-outline-white:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: #fff; }

/* ── Testimonial cards ──────────────────────────────────── */
.testimonials-section {
  padding: 72px 0 60px;
  background: #f8fffe;
}
.tcard {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  height: 100%;
  position: relative;
  border-top: 4px solid #11998e;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(17,153,142,0.13); }
.tcard-stars { color: #f59e0b; font-size: 0.85rem; margin-bottom: 10px; }
.tcard-quote {
  font-size: 3rem;
  line-height: 1;
  color: #e6f4f1;
  font-family: Georgia, serif;
  margin-bottom: 4px;
  display: block;
}
.tcard-text {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.75;
  flex: 1;
  margin-bottom: 24px;
}
.tcard-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #f0f0f0;
  padding-top: 18px;
}
.tcard-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e6f4f1;
  flex-shrink: 0;
}
.tcard-avatar-placeholder {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #11998e, #26D0CE);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.tcard-name { font-weight: 700; color: #111; font-size: 0.95rem; line-height: 1.3; }
.tcard-role { font-size: 0.8rem; color: #11998e; font-weight: 600; }
.tcard-source {
  display: inline-block;
  font-size: 0.7rem;
  background: #f0f4ff;
  color: #1A2980;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════
   About Us page styles
   ════════════════════════════════════════════════════════ */

/* ── About Page Custom Styles ─────────────────────────── */

/* Section wrapper */
.about-section {
  padding: 72px 0;
}
.about-section.alt-bg {
  background: #f7f9fc;
}
.section-tag {
  display: inline-block;
  background: #e6f4f1;
  color: #11998e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.section-heading {
  font-size: 2rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 14px;
  line-height: 1.25;
}
.section-heading span { color: #11998e; }
.section-lead {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Story section */
.story-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.13);
}
.story-img-wrap img {
  width: 100%;
  border-radius: 16px;
}
.story-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: #11998e;
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(17,153,142,0.4);
}
.story-badge strong { font-size: 1.6rem; display: block; }

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
}
.highlight-list li {
  padding: 8px 0 8px 30px;
  position: relative;
  color: #444;
  font-size: 0.97rem;
  border-bottom: 1px solid #eee;
}
.highlight-list li:last-child { border-bottom: none; }
.highlight-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 10px;
  color: #11998e;
  font-size: 0.85rem;
}

.btn-about-cta {
  display: inline-block;
  background: #11998e;
  color: #fff;
  padding: 13px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  margin-right: 12px;
}
.btn-about-cta:hover { background: #0a7a6a; color: #fff; transform: translateY(-2px); }
.btn-about-outline {
  display: inline-block;
  border: 2px solid #11998e;
  color: #11998e;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-about-outline:hover { background: #11998e; color: #fff; }

/* Mission / Vision cards */
.mv-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.07);
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
  border-top: 4px solid #11998e;
}
.mv-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
.mv-card .mv-icon {
  width: 60px; height: 60px;
  background: #e6f4f1;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: #11998e;
  margin-bottom: 20px;
}
.mv-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
}
.mv-card p {
  color: #666;
  font-size: 0.97rem;
  line-height: 1.75;
  margin: 0;
}

/* Awards grid */
.award-card {
  background: #fff;
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 3px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
  height: 100%;
}
.award-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,0.11); }
.award-card .award-icon-wrap {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #11998e, #11998e);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.5rem;
  color: #fff;
}
.award-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.award-card p {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

/* Tech icons */
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.tech-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 14px 12px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  width: 90px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tech-item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.tech-item img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 8px; }
.tech-item span { font-size: 0.7rem; color: #555; font-weight: 600; display: block; }

/* Industries */
.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #d0e3f8;
  color: #11998e;
  border-radius: 30px;
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 6px;
  transition: all 0.2s;
}
.industry-tag:hover { background: #11998e; color: #fff; border-color: #11998e; }
.industry-tag i { font-size: 0.9rem; }

/* Client logos */
.client-logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.client-logo-item {
  background: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 70px;
  transition: box-shadow 0.2s;
}
.client-logo-item:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); }
.client-logo-item img { max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(100%); opacity: 0.65; transition: all 0.2s; }
.client-logo-item:hover img { filter: grayscale(0%); opacity: 1; }


/* Timeline */
.timeline {
  position: relative;
  padding-left: 36px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #11998e, #7ec8ff);
}
.timeline-item {
  position: relative;
  margin-bottom: 32px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 14px; height: 14px;
  background: #11998e;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #11998e;
}
.timeline-item .t-year {
  font-size: 0.78rem;
  font-weight: 700;
  color: #11998e;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.timeline-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.timeline-item p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
}


@media (max-width: 767px) {
  
  
  .section-heading { font-size: 1.6rem; }
  .story-img-wrap { margin-bottom: 32px; }
}