:root{
      --bs-primary: #5b7cfa; /* Feel free to adjust brand color */
      --gradient: linear-gradient(135deg, #5b7cfa 0%, #7a60ff 40%, #00c2ff 100%);
    }

    /* Base */
    body{font-family: system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
    .btn-gradient{background: var(--gradient); border:0; color:#fff}
    .btn-gradient:hover{filter: brightness(0.95); color:#fff}
    .text-gradient{background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}

    /* Navbar */
    .navbar{transition: all .3s ease}
    .navbar.scrolled{box-shadow: 0 10px 30px rgba(0,0,0,.08); background:#fff}

    /* Hero */
    .hero{
      position: relative; 
      min-height: 100vh; 
      display:grid; 
      place-items:center; 
      overflow:hidden;
      background:
        radial-gradient(1000px 500px at 80% -10%, rgba(123,96,255,.25), transparent 60%),
        radial-gradient(800px 400px at -10% 10%, rgba(0,194,255,.18), transparent 60%),
        #0f1221;
      color: #eef3ff;
    }
    .hero-blob{position:absolute; inset: -20% -10% auto auto; width:60vw; height:60vw; background: var(--gradient); filter: blur(60px); opacity:.25; z-index:0}
    .hero .container{position:relative; z-index:1}
    .hero-badge{background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);}

    /* Feature cards */
    .feature-card{border:1px solid rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease}
    .feature-card:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.08)}

    /* Section helpers */
    section{scroll-margin-top: 90px}
    .section-title .subtitle{letter-spacing:.12em; font-weight:700; text-transform:uppercase; color:#6c757d}

    /* Showcase */
    .showcase-item{
      position:relative; border-radius:1rem; overflow:hidden; border:1px solid rgba(0,0,0,.08)}
    .showcase-item img{width:100%; max-height:300px; object-fit:cover;}
.showcase-item {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  display: block;
}
.car-image {
  top: 0;
  width: 80%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.showcase-item img {
  width-max: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay full image */
.showcase-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(15,18,33,0.5); /* full overlay */
  color: #fff;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.showcase-item:hover .showcase-overlay {
  opacity: 1;
}


/* Konten overlay */
.overlay-content h6 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.overlay-content small {
  font-size: 0.9rem;
  color: #f0f0f0;
}


    .showcase-item:hover .showcase-overlay
    {
      opacity:1
    }

    /* Pricing */
    .pricing-card{border:1px solid rgba(0,0,0,.08); border-radius:1.25rem}
    .pricing-card.popular{border-color: transparent; box-shadow:0 20px 50px rgba(91,124,250,.25)}

    /* Testimonial */
    .avatar{width:56px; height:56px; border-radius:50%; object-fit:cover}

    /* FAQ */
    .accordion-button:not(.collapsed){background:#f6f8ff; color:#1b2a4a}

    /* Footer */
    .footer{background:#0f1221; color:#cbd5e1}

    /* Preloader */
    #preloader{position:fixed; inset:0; background:#0f1221; display:grid; place-items:center; z-index:9999}
    .spinner{width:48px; height:48px; border:4px solid rgba(255,255,255,.15); border-top-color:#fff; border-radius:50%; animation:spin .9s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Back to top */
    .back-to-top{position:fixed; right:16px; bottom:16px; z-index:1040; opacity:0; transform:translateY(12px); transition:.2s}
    .back-to-top.show{opacity:1; transform:none}

     .gradient-card {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    color: #fff;
    border: none;
  }
  .service-card {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    color: #fff;
  }
  .text-muted:hover
  {
    color: #fff;
  }
  .btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f8f9fa;
    color: #000;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
  }
  .btn-circle:hover {
    background: #000;
    color: #fff;
  }

  .experience-box {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    color: #fff;
  }
  .text-gradient {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .gradient-btn {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    border: none;
    padding: 10px 25px;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.3s;
    text-decoration: none;
  }
  .gradient-btn:hover {
    opacity: 0.9;
    color: #fff;
  }
  .text-gradient {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .blog-card {
    border-radius: 10px;
    background: #fff;
    transition: all 0.3s ease;
  }
  .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }
  .active-card {
    background: linear-gradient(135deg, #4e00c2, #ec008c);
    color: #fff;
  }
  .active-card h5,
  .active-card p,
  .active-card small {
    color: #fff !important;
  }
  .btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
  }
  .btn-circle:hover {
    background: #000;
    color: #fff;
  }

  /* Mobile only: card style full */
  @media (max-width: 767px) {
    .blog-card {
      flex-direction: column !important;
      text-align: center;
    }
  }