/* ==============================
       BRAND VARIABLES
    ============================== */
    :root {
      --dark-blue: #0c2c4a;
      --sky-blue: #0ea5e9;
      --golden: #f59e0b;
      --light-bg: #f8fafc;
      --text-dark: #1f2937;
      --text-muted: #6b7280;
      --card-radius: 18px;
    }



    /* ==============================
       PAGE TITLE / HERO BANNER
    ============================== */
    .services-hero {
      background: linear-gradient(135deg, var(--dark-blue) 0%, #1a4a6e 50%, #0ea5e9 100%);
      padding: 130px 0 70px;
      position: relative;
      overflow: hidden;
    }
    .services-hero::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 300px; height: 300px;
      background: rgba(245,158,11,0.12);
      border-radius: 50%;
    }
    .services-hero::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -80px;
      width: 400px; height: 400px;
      background: rgba(14,165,233,0.1);
      border-radius: 50%;
    }
    .services-hero .hero-badge {
      display: inline-block;
      background: rgba(245,158,11,0.2);
      color: var(--golden);
      border: 1px solid rgba(245,158,11,0.4);
      border-radius: 50px;
      padding: 6px 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .services-hero h1 {
      font-size: 52px;
      font-weight: 900;
      color: #fff;
      line-height: 1.1;
      font-family: 'Raleway', sans-serif;
    }
    .services-hero h1 span { color: var(--golden); }
    .services-hero p {
      color: rgba(255,255,255,0.8);
      font-size: 17px;
      line-height: 1.7;
      max-width: 540px;
    }
    .breadcrumbs-bar {
      background: rgba(255,255,255,0.08);
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 14px 0;
    }
    .breadcrumbs-bar ol {
      display: flex; list-style: none; padding: 0; margin: 0; gap: 8px;
    }
    .breadcrumbs-bar ol li { color: rgba(255,255,255,0.6); font-size: 13px; }
    .breadcrumbs-bar ol li a { color: var(--golden); text-decoration: none; }
    .breadcrumbs-bar ol li.current { color: #fff; font-weight: 600; }
    .breadcrumbs-bar ol li:not(:last-child)::after { content: '/'; margin-left: 8px; }

    /* Stats row in hero */
    .hero-stats { margin-top: 40px; }
    .hero-stat-item {
      text-align: center;
      padding: 16px 20px;
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .hero-stat-item h3 { font-size: 28px; font-weight: 800; color: var(--golden); margin: 0; }
    .hero-stat-item p { font-size: 12px; color: rgba(255,255,255,0.75); margin: 4px 0 0; }

    /* ==============================
       SECTION COMMON
    ============================== */
    .section-badge {
      display: inline-block;
      background: #e3f2fd;
      color: var(--dark-blue);
      border: 1px solid rgba(12,44,74,0.15);
      border-radius: 50px;
      padding: 6px 18px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .section-heading {
      font-size: 38px;
      font-weight: 800;
      color: var(--text-dark);
      font-family: 'Raleway', sans-serif;
    }
    .section-heading span { color: var(--dark-blue); }

    /* ==============================
       OVERVIEW SECTION
    ============================== */
    .services-overview { padding: 80px 0; background: #fff; }
    .overview-card {
      background: var(--light-bg);
      border-radius: var(--card-radius);
      padding: 36px 28px;
      height: 100%;
      border: 2px solid transparent;
      transition: 0.35s;
      position: relative;
      overflow: hidden;
    }
    .overview-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--card-radius);
      padding: 2px;
      background: linear-gradient(45deg, var(--dark-blue), var(--sky-blue));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s;
    }
    .overview-card:hover::before { opacity: 1; }
    .overview-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 45px rgba(12,44,74,0.15);
    }
    .overview-card .ov-icon {
      width: 64px; height: 64px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--dark-blue), #1a4a6e);
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; color: #fff;
      margin-bottom: 20px;
      transition: 0.35s;
    }
    .overview-card:hover .ov-icon {
      background: linear-gradient(135deg, var(--golden), #d97706);
      transform: rotate(8deg) scale(1.1);
    }
    .overview-card h4 {
      font-size: 19px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 10px;
    }
    .overview-card p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0; }
    .overview-card .learn-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--dark-blue); font-weight: 600; font-size: 13px;
      text-decoration: none; margin-top: 16px;
      transition: 0.3s;
    }
    .overview-card .learn-link:hover { color: var(--sky-blue); gap: 10px; }

    /* ==============================
       DETAILED SERVICE SECTIONS (alternating)
    ============================== */
    .service-detail-section { padding: 80px 0; }
    .service-detail-section:nth-child(even) { background: var(--light-bg); }
    .service-detail-section:nth-child(odd) { background: #fff; }

    .service-visual {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
    }
    .service-visual-inner {
      background: linear-gradient(135deg, var(--dark-blue), #1a4a6e);
      border-radius: 20px;
      padding: 50px 40px;
      height: 100%;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .service-visual-inner::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 200px; height: 200px;
      background: rgba(14,165,233,0.15);
      border-radius: 50%;
    }
    .service-visual-inner::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -30px;
      width: 250px; height: 250px;
      background: rgba(245,158,11,0.1);
      border-radius: 50%;
    }
    .service-visual-inner .big-icon {
      font-size: 80px;
      color: rgba(255,255,255,0.15);
      position: absolute;
      bottom: 20px; right: 30px;
    }
    .service-visual-inner .vi-badge {
      display: inline-block;
      background: rgba(245,158,11,0.25);
      color: var(--golden);
      border: 1px solid rgba(245,158,11,0.4);
      border-radius: 50px;
      padding: 5px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      margin-bottom: 20px;
    }
    .service-visual-inner h3 {
      font-size: 34px;
      font-weight: 800;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      margin-bottom: 16px;
      position: relative; z-index: 1;
    }
    .service-visual-inner p {
      color: rgba(255,255,255,0.8);
      line-height: 1.7;
      font-size: 15px;
      position: relative; z-index: 1;
    }
    .service-visual-inner .vi-stats {
      display: flex; gap: 20px; margin-top: 30px;
      position: relative; z-index: 1;
    }
    .service-visual-inner .vi-stat {
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 14px 18px;
      border: 1px solid rgba(255,255,255,0.15);
      flex: 1;
    }
    .service-visual-inner .vi-stat h4 { font-size: 22px; font-weight: 800; color: var(--golden); margin: 0; }
    .service-visual-inner .vi-stat p { font-size: 11px; color: rgba(255,255,255,0.7); margin: 4px 0 0; }

    .service-content-side { padding: 10px 0 10px 20px; }
    .service-content-side.left-pad { padding: 10px 20px 10px 0; }

    .service-features { list-style: none; padding: 0; margin: 24px 0; }
    .service-features li {
      display: flex; align-items: flex-start; gap: 12px;
      margin-bottom: 18px;
      padding: 16px 18px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      border-left: 3px solid var(--dark-blue);
      transition: 0.3s;
    }
    .service-detail-section:nth-child(even) .service-features li { background: #fff; }
    .service-features li:hover {
      transform: translateX(5px);
      border-left-color: var(--golden);
      box-shadow: 0 4px 20px rgba(12,44,74,0.12);
    }
    .service-features li .fi-icon {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--dark-blue), var(--sky-blue));
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; color: #fff;
      flex-shrink: 0;
      transition: 0.3s;
    }
    .service-features li:hover .fi-icon {
      background: linear-gradient(135deg, var(--golden), #d97706);
    }
    .service-features li .fi-text strong {
      display: block; font-size: 14px; font-weight: 700; color: var(--text-dark);
    }
    .service-features li .fi-text span {
      font-size: 13px; color: var(--text-muted);
    }

    .service-cta-btn {
      display: inline-flex;
      align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--dark-blue), #1a4a6e);
      color: #fff;
      padding: 13px 30px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      transition: 0.3s;
      border: none;
      cursor: pointer;
    }
    .service-cta-btn:hover {
      background: linear-gradient(135deg, var(--golden), #d97706);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(245,158,11,0.35);
    }

    /* ==============================
       PROCESS SECTION
    ============================== */
    .process-section { padding: 80px 0; background: var(--dark-blue); }
    .process-section .section-badge { background: rgba(245,158,11,0.2); color: var(--golden); border-color: rgba(245,158,11,0.3); }
    .process-section .section-heading { color: #fff; }
    .process-step {
      text-align: center;
      padding: 30px 20px;
      position: relative;
    }
    .process-step::after {
      content: '';
      position: absolute;
      top: 48px; right: -20px;
      width: 40px; height: 2px;
      background: rgba(245,158,11,0.4);
    }
    .process-step:last-child::after { display: none; }
    .step-number {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--golden), #d97706);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 800; color: #fff;
      margin: 0 auto 20px;
      box-shadow: 0 8px 20px rgba(245,158,11,0.4);
    }
    .process-step h5 { font-weight: 700; color: #fff; font-size: 16px; margin-bottom: 8px; }
    .process-step p { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.6; }

    /* ==============================
       WHY US SECTION
    ============================== */
    .why-us-section { padding: 80px 0; background: #fff; }
    .why-card {
      text-align: center;
      padding: 36px 24px;
      border-radius: var(--card-radius);
      background: var(--light-bg);
      height: 100%;
      transition: 0.35s;
      border: 2px solid transparent;
    }
    .why-card:hover {
      background: #fff;
      border-color: var(--dark-blue);
      transform: translateY(-8px);
      box-shadow: 0 20px 45px rgba(12,44,74,0.12);
    }
    .why-card .wc-icon {
      font-size: 44px;
      color: var(--dark-blue);
      margin-bottom: 16px;
      display: block;
      transition: 0.35s;
    }
    .why-card:hover .wc-icon { color: var(--golden); transform: scale(1.15); }
    .why-card h5 { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
    .why-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; }

    /* ==============================
       CTA BANNER
    ============================== */
    .cta-banner {
      background: linear-gradient(135deg, var(--dark-blue), var(--sky-blue));
      padding: 70px 0;
    }
    .cta-banner h2 {
      font-size: 38px;
      font-weight: 800;
      color: #fff;
      font-family: 'Raleway', sans-serif;
    }
    .cta-banner p { color: rgba(255,255,255,0.8); font-size: 17px; }
    .cta-banner .btn-light {
      border-radius: 50px;
      padding: 12px 32px;
      font-weight: 600;
      color: var(--dark-blue);
      border: none;
      transition: 0.3s;
    }
    .cta-banner .btn-light:hover {
      background: var(--golden);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(245,158,11,0.4);
    }
    .cta-banner .btn-outline-light {
      border-radius: 50px;
      padding: 12px 32px;
      font-weight: 600;
      border: 2px solid rgba(255,255,255,0.5);
      color: #fff;
      transition: 0.3s;
    }
    .cta-banner .btn-outline-light:hover {
      background: rgba(255,255,255,0.15);
      border-color: #fff;
      transform: translateY(-3px);
    }

    /* ==============================
       GLASS MODAL (same as index)
    ============================== */
    .glass-modal .modal-content {
      background: rgba(255,255,255,0.97);
      border-radius: 20px;
      border: none;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }

    /* ==============================
       RESPONSIVE
    ============================== */
    @media (max-width: 991px) {
      .services-hero h1 { font-size: 36px; }
      .service-content-side, .service-content-side.left-pad { padding: 20px 0 0; }
      .process-step::after { display: none; }
    }
    @media (max-width: 768px) {
      .services-hero h1 { font-size: 30px; }
      .services-hero { padding: 110px 0 50px; }
      .section-heading { font-size: 28px; }
      .service-visual-inner { min-height: 300px; padding: 36px 28px; }
      .service-visual-inner h3 { font-size: 26px; }
    }