:root {
      --primary: #4e54c8;
      --accent: #00f2fe;
      --bg: #e9e9f0;
      --text: #111827;
      --card-bg: rgba(255, 255, 255, 0.9);
      --shadow: 0 12px 30px rgba(8, 15, 40, 0.06);
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
      color: var(--text);
      scroll-behavior: smooth;
    }

    h1, h2, h3, h4, h5 {
      font-weight: 700;
    }

    section {
      padding: 80px 0;
      position: relative;
    }

    .section h1 {
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    }

    /* === Navbar === */
    .navbar-glass {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(6px) saturate(120%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: var(--shadow);
    }

    .navbar-brand {
      font-weight: 700;
      color: var(--text);
    }

    .navbar .nav-link {
      color: #08102a;
      transition: color 0.2s ease;
    }

    .navbar .nav-link:hover {
      color: var(--primary);
    }

    /* === Hero Section === */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    }

    .btn-cta {
      background: linear-gradient(90deg, var(--primary), var(--accent));
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 0.65rem 1rem;
      box-shadow: 0 12px 28px rgba(14, 21, 70, 0.18);
      transition: transform 0.2s ease;
    }

    .btn-cta:hover {
      transform: translateY(-2px);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      border-radius: 12px;
      padding: 0.55rem 0.9rem;
    }

    /* === Cards === */
    .card {
      border: none;
      border-radius: 1rem;
      background: var(--card-bg);
      box-shadow: var(--shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    /* === Process === */
    .process-step {
      text-align: center;
      transition: transform 0.3s ease;
    }

    .process-step:hover {
      transform: translateY(-8px);
    }

    .process-step .circle {
      width: 80px;
      height: 80px;
      margin: auto;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      transition: transform 0.3s ease;
    }

    .process-step:hover .circle {
      transform: scale(1.1);
    }

    .process-line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      z-index: 0;
    }

    /* === Portfolio & Pricing Cards === */
    .card-portfolio:hover,
    .card-pricing:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }

    /* === Testimonials === */
    .testimonial-card {
      background: #fff;
      border-radius: 1.5rem;
      box-shadow: var(--shadow);
      padding: 1.5rem;
    }

    .testimonial-card p {
      font-style: italic;
      color: #333;
    }

    /* === Footer === */
    footer {
      background: #0b1220;
      color: #eee;
      text-align: center;
    }

    footer a {
      color: #eee;
      transition: color 0.2s ease;
    }

    footer a:hover {
      color: var(--accent);
    }

    /* === Responsive === */
    @media (max-width: 767px) {
      .hero-content {
        text-align: center;
      }

      .process-step {
        margin-bottom: 40px;
      }

      .testimonial-card {
        text-align: center;
        flex-direction: column;
      }

      .testimonial-card img {
        margin-bottom: 0.75rem;
      }
    }

    /* === Utility Animations === */
    .fade-out {
      opacity: 1;
      transition: opacity 0.8s ease-out;
    }

    .fade-out.hide {
      opacity: 0;
    }

    .carousel-img{max-width:400px;margin:auto;}

    /* Center all carousel images in modals */
    .carousel-inner img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-height: 500px; /* adjust as needed */
      object-fit: contain;
    }

    /* Make card cursor black on hover */
    .card:hover {
      cursor: pointer;
    }