body { font-family: 'Poppins', sans-serif; }
    .gradient-border { background: linear-gradient(135deg, #10b981, #059669, #047857); border-radius: 0.75rem; }
    .service-card { transition: all 0.3s ease; }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
    .image-container { border-radius: 0.75rem 0 0 0.75rem; }
    @media (max-width: 767px) { .image-container { border-radius: 0.75rem 0.75rem 0 0; } }

    .hero {
      position: relative; height: 60vh; min-height: 500px;
      overflow: hidden; display: flex; align-items: center;
      justify-content: center; color: white; text-align: center;
    }
    .video-background { position: absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
    .video-background video { width:100%; height:100%; object-fit:cover; }
    .video-overlay {
      position: absolute; top:0; left:0; width:100%; height:100%;
      background: linear-gradient(135deg, rgba(10,25,47,0.85) 0%, rgba(16,57,107,0.7) 100%);
      z-index: 0;
    }
    .hero-content { position:relative; z-index:1; max-width:800px; padding:0 20px; }
    .blue-curves { position:absolute; bottom:0; left:0; width:100%; height:100px; z-index:1; overflow:hidden; }
    .blue-curves::before {
      content:''; position:absolute; bottom:0; left:0; width:100%; height:100%;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23298bb9' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
      background-size:cover; background-position:center;
    }

    .services-container {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 25px; max-width: 1400px;
      margin: -80px auto 100px; padding: 0 30px;
      position: relative; z-index: 2;
    }
    .service-card-large {
      background: rgba(255,255,255,0.95); border-radius: 15px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.2); padding: 30px 20px;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      color: #333; position: relative; overflow: hidden;
    }
    .service-card-large::before {
      content:''; position:absolute; top:0; left:0; width:100%; height:5px;
      background: linear-gradient(90deg,#3498db,#2c3e50);
    }
    .service-card-large:hover { transform: translateY(-15px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

    @media (max-width:1200px) { .services-container { grid-template-columns:repeat(2,1fr); margin-top:-60px; } }
    @media (max-width:768px)  {
      .hero { height:50vh; min-height:360px; }
      .hero h1 { font-size:1.75rem; }
      .services-container { grid-template-columns:1fr; margin-top:0; }
    }
    @media (max-width:480px) {
      .hero { height:45vh; min-height:300px; }
      .hero h1 { font-size:1.4rem; }
      .hero p  { font-size:.9rem; }
      .services-container { margin-top:0; padding:0 1rem; gap:1rem; }
      .service-card-large { padding:1.25rem; }
      .proj-filter-bar { gap:6px; }
      .proj-filter { padding:6px 14px; font-size:.78rem; }
      .proj-img-wrap { height:180px; }
      .project-title { font-size:.9rem; }
    }
    @media (max-width:360px) {
      .hero h1 { font-size:1.25rem; }
      .gallery-arrow { width:36px; height:36px; }
      .gallery-arrow.prev { left:-6px; }
      .gallery-arrow.next { right:-6px; }
    }

    /* ── Gallery ── */
    .proj-filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
    .proj-filter {
      padding:8px 22px; border-radius:999px; border:1.5px solid #e5e7eb;
      font-size:.85rem; font-weight:600; color:#374151; background:#fff;
      cursor:pointer; transition:all .2s;
    }
    .proj-filter:hover { border-color:#0ea5e9; color:#0ea5e9; }
    .proj-filter.active { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

    .gallery-outer { position:relative; }
    .gallery-container { overflow:hidden; }
    .gallery-slider {
      display:flex; gap:20px;
      transition:transform .5s cubic-bezier(.4,0,.2,1);
      will-change:transform;
    }
    .gallery-slide { flex-shrink:0; /* width set by JS */ }

    /* Card — matches reference image style */
    .project-card {
      border-radius:16px; overflow:hidden;
      background:#fff;
      box-shadow:0 2px 16px rgba(0,0,0,.07);
      border:1px solid #f1f5f9;
      transition:transform .3s ease, box-shadow .3s ease;
      height:100%;
    }
    .project-card:hover { transform:translateY(-7px); box-shadow:0 16px 40px rgba(14,165,233,.15); }
    .project-card:hover .proj-img { transform:scale(1.05); }
    .proj-img-wrap { height:230px; overflow:hidden; position:relative; }
    .proj-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
    .project-content { padding:18px 20px 20px; }
    .proj-cat-pill {
      display:inline-block; padding:4px 13px; border-radius:999px;
      background:#e0f2fe; color:#0369a1;
      font-size:.72rem; font-weight:700; letter-spacing:.04em;
      margin-bottom:10px;
    }
    .project-title { font-size:1rem; font-weight:800; color:#0f172a; margin-bottom:7px; line-height:1.35; }
    .project-details { font-size:.83rem; color:#64748b; line-height:1.55; }

    /* Nav arrows — floating sides */
    .gallery-arrow {
      position:absolute; top:50%; transform:translateY(-50%);
      width:44px; height:44px; border-radius:50%;
      background:#fff; border:1.5px solid #e5e7eb; color:#374151;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all .2s; z-index:10;
      box-shadow:0 4px 16px rgba(0,0,0,.1);
    }
    .gallery-arrow:hover { background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
    .gallery-arrow:disabled { opacity:.35; cursor:not-allowed; }
    .gallery-arrow:disabled:hover { background:#fff; color:#374151; border-color:#e5e7eb; }
    .gallery-arrow.prev { left:-22px; }
    .gallery-arrow.next { right:-22px; }
    @media(max-width:768px){
      .gallery-arrow.prev { left:-10px; }
      .gallery-arrow.next { right:-10px; }
    }
    .gallery-dots { display:flex; justify-content:center; gap:8px; margin-top:28px; }
    .gallery-dot {
      width:8px; height:8px; border-radius:50%;
      background:#cbd5e1; border:none; cursor:pointer; transition:all .2s;
    }
    .gallery-dot.active { background:#0ea5e9; width:24px; border-radius:999px; }