body {
  font-family: Arial, sans-serif;
}
/* NAV */
/* NAV */
.navbar {
  background: #8B86F5; /* Theme gradient */
  position: fixed;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.navbar a,
.navbar .navbar-brand {
  color: #ffffff !important;       /* Crisp white text */
}
/* HERO */
.hero {
  height: 100vh;
  background: url('../images/hero-app-designs.jpg') center/cover no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
}
.hero h1,
.hero p {
  color: #7377FA;
}
/* BUTTON */
.btn-gradient {
  background: linear-gradient(45deg, #6ec1ff, #9b7bff);
  color: white;
  border: none;
}
/* CARDS */
.cards-section {
  margin-top: -100px;
  position: relative;
  z-index: 5;
  padding-bottom: 60px;
}
.card {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.25s;
}
.card:hover {
  transform: translateY(-6px);
}
.card img {
  height: 150px;
  object-fit: cover;
}
/* ABOUT SPLIT SECTION */
.split-section {
  padding: 80px 0;
  background: #ffffff;
}
.split-section img {
  width: 100%;
  border-radius: 12px;
}
/* FOOTER */
footer {
  background: #8B86F5;
  color: white;
}
h2 {
  color: #8B86F5;
}
.btn-primary {
  --bs-btn-color: #8B86F5;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #8B86F5;
}
.eyebrow{
  background: #8B86F5;
  color: #fff;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 12px;
}
.box-shadow{
  box-shadow: -2px -1px 18px -1px #8B86F5;;
}
.bdr-top{
  border-top: solid 1px #8B86F5;
}