@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Kufi+Arabic:wght@100..900&display=swap");

:root {
  --background-light: rgb(240, 240, 240);
  --color-yellow: yellow;
  --color-blue: #0d6efd;
  --primary: #534a98;
}

body {
  font-family: "Noto Kufi Arabic", sans-serif !important;
  font-weight: 100;
  font-style: normal;
}
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff;
}
body .bg-primary {
  background-color: var(--primary) !important;
}
body .bg-light-blue {
  background-color: var(--color-blue) !important;
}
p.text-primary {
  font-weight: bold;
  color: var(--primary) !important;
}
.col {
  display: flex;
  justify-content: center;
}
.chat-bubble {
  width: 100% !important;
  overflow-y: hidden;
  border-radius: 30px !important;
}

.card {
  width: 100% !important;
  height: 10rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.card .icon {
  font-size: 40px;
  position: relative;
  top: -50px;
  text-align: center;
  height: 4rem;
  transition: transform 0.3s ease-in-out;
}
.card:hover .icon {
  transform: translateY(-10px) scale(1.1);
}
.card:hover {
  border: 2px solid var(--color-yellow) !important;
}
.card .icon img {
  width: 9rem;
  height: 7rem;
}

.solutions {
  height: 55rem !important;
}

.logo {
  width: 6rem;
}
.bg-image {
  z-index: -1;
  margin: -50px;
}
/* classes */
.mb-10 {
  margin-bottom: 5rem;
}
.text-xl {
  font-size: 4rem !important;
}
.text-lg {
  font-size: 1.5rem !important;
}
.text-2lg {
  font-size: 2rem !important;
}
.bg-gray {
  background-color: var(--background-light) !important;
}
.font-bold {
  font-weight: 700 !important;
}
/* Mobile view (you can adjust the max-width value to your needs) */
@media (max-width: 768px) {
  .solutions {
    height: 100rem !important; /* Adjust this value as per your design */
  }
}