.uiux-branding {
  background: linear-gradient(180deg, #070812, #03040a);
  padding: 100px 20px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
}

.uiux-container {
  max-width: 1200px;
  margin: auto;
}

.tag {
  display: inline-block;
  background: rgba(52, 86, 211, 0.12);
  color: #3456d3;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 18px;
}

.uiux-branding h2 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 16px;
}

.subtitle {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.6;
  color: #b4b8cc;
  margin-bottom: 65px;
}

.uiux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.uiux-card {
  background: linear-gradient(180deg, #0b0e1d, #060812);
  border-radius: 18px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
}

.uiux-card:hover {
  transform: translateY(-6px);
  border-color: rgba(52, 86, 211, 0.5);
}

.uiux-card h3 {
  font-size: 21px;
  margin-bottom: 12px;
}

.uiux-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #a6abc4;
}

.why-box {
  margin-top: 70px;
  padding: 34px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(52, 86, 211, 0.16),
    rgba(52, 86, 211, 0.04)
  );
  border: 1px solid rgba(52, 86, 211, 0.25);
}

.why-box h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

.why-box p {
  font-size: 16px;
  line-height: 1.6;
  color: #d0d4ff;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;       /* distance from bottom */
  right: 20px;        /* distance from right */
  width: 60px;        /* icon size */
  height: 60px;
  z-index: 1000;      /* ensures it stays on top */
  cursor: pointer;
  transition: transform 0.3s;
}

.whatsapp-float:hover {
  transform: scale(1.1); /* slight hover effect */
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
  display: block;
}