/* This style.css only for sevices pages  */
  /* for index page css is inside the page */


  :root {
      --brand: #1a73e8;
      --brand-deep: #0d47a1;
      --ink: #222;
      --muted: #444;
      --surface: #ffffff;
      --paper: #f9fbfd;
      --soft: #f0f6ff;
      --radius: 16px;
  }

  /* Base */
  html,
  body {
      margin: 0;
  }

  body {
      font-family: "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
      background: var(--paper);
      color: var(--ink);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      font-size: 19px;
  }

  /* Header with logo + back */
  header {
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 20px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
      position: sticky;
      top: 0;
      z-index: 10;
  }

  .logo img {
      width: 200px;
      height: 50px;
      object-fit: contain;
  }

  /* Round Glassy Back Button */
  .back-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--brand);
      background: rgba(255, 255, 255, 0.4);
      color: var(--brand);
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      transition: background 0.3s, color 0.3s;
  }

  .back-btn::before {
      content: "<";
  }

  .back-btn:hover {
      background: var(--brand);
      color: #fff;
  }

  /* Layout */
  .container {
      max-width: 90%;
      margin: 40px auto;
      padding: 0 20px;
  }

  /* Hero */
  .hero {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 32px;
      margin-bottom: 40px;
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
      padding: 24px;
  }

  .hero img {
      flex: 1 1 480px;
      width: 100%;
      max-width: 560px;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  }

  .hero .text {
      flex: 1 1 420px;
  }

  .eyebrow {
      color: var(--brand-deep);
      font-weight: 700;
      letter-spacing: .4px;
      text-transform: uppercase;
      font-size: 13px;
  }

  h1 {
      font-size: 32px;
      line-height: 1.25;
      margin: 6px 0 10px;
      color: var(--brand-deep);
  }

  .lead {
      color: var(--muted);
      font-size: 18px;
  }

  /* Section blocks */
  section {
      margin: 34px 0;
  }

  section h2 {
      font-size: 22px;
      margin: 0 0 12px;
      color: var(--brand-deep);
      border-left: 6px solid var(--brand);
      padding-left: 10px;
  }

  p {
      color: var(--muted);
      margin: 0 0 12px;
  }

  ul {
      margin: 8px 0 0;
      padding-left: 20px;
  }

  li {
      margin: 6px 0;
  }

  .facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 14px;
  }

  .fact {
      background: var(--soft);
      border: 1px solid rgba(26, 115, 232, .18);
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 17px
  }

  .fact b {
      color: var(--brand-deep);
  }

  .callout {
      background: #e9f3ff;
      border-left: 6px solid var(--brand);
      padding: 16px;
      border-radius: 12px;
      margin-top: 14px;
  }

  /* FAQ */
  .faq {
      background: var(--soft);
      padding: 26px;
      border-radius: 14px;
      margin-top: 22px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  }

  .faq h2 {
      margin-bottom: 12px;
  }

  .faq-item {
      margin: 12px 0;
  }

  .faq-item strong {
      display: block;
      color: #1a2a50;
      margin-bottom: 6px;
  }

  .faq-item span {
      color: var(--muted);
  }

  /* Footer */
  footer {
      text-align: center;
      padding: 24px;
      color: #fff;
      background: var(--brand-deep);
      margin-top: 50px;
      font-size: 14px;
  }

  /* Small screens */
  @media (max-width:600px) {
      header {
          background: none;
          box-shadow: none;
          padding: 0;
          position: relative;
      }

      .logo {
          display: none;
      }

      .back-btn {
          position: fixed;
          top: 14px;
          left: 14px;
          z-index: 1100;
      }

      h1 {
          font-size: 26px;
      }
  }

  /* Gallery */
  .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin-top: 14px;
  }

  .gallery-grid img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
      background: #eee;
  }