:root {
  --primary-color: #61399f;
  --secondary-color: #43a9b4;
  --accent-color: #7c3aed;

  --success-color: #15803d;
  --text-dark: #0f172a;
  --text-light: #475569;
  --bg-light: #ecfdf5;
}

.bg-triangle-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L100,0 L50,100 Z' fill='%23ffffff' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

.bg-dot-pattern {
  background-image: radial-gradient(circle, #ffffff 2px, transparent 1px);
  background-size: 50px 50px;
}


.bg-geometric-lines {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
}

.bg-circle-wave {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.4) 5px, transparent 5px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.3) 5px, transparent 5px);
  background-size: 60px 60px;
}

.bg-geometric-grid {
  background-image:
    radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.9) 30% 40%, transparent 40%),
    radial-gradient(ellipse at 75% 75%, rgba(255, 255, 255, 0.9) 30% 40%, transparent 40%);
  background-size: 60px 60px;
  opacity: 0.6;
}

.bg-circular-connections {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='%2343a9b4' stroke-width='2' opacity='0.7'/%3E%3Ccircle cx='60' cy='60' r='25' fill='none' stroke='%2343a9b4' stroke-width='2' opacity='0.7'/%3E%3Ccircle cx='60' cy='60' r='10' fill='none' stroke='%2343a9b4' stroke-width='2' opacity='0.7'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: #fefefe;
}

a {
  text-decoration: none;
  color: inherit;
}

details p,
span {
  text-align: justify;
}

.blogs-content p {
  text-align: justify;
}

.bg-custom-primary {
  background-color: var(--primary-color);
}

.text-custom-primary {
  color: var(--primary-color) !important;
}

.bg-custom-secondary {
  background-color: var(--secondary-color);
}

.text-custom-secondary {
  color: var(--secondary-color);
}

.bg-custom-accent {
  background-color: var(--accent-color);
}

.text-custom-accent {
  color: var(--accent-color) !important;
}

.bg-custom-success {
  background-color: var(--success-color);
}

.text-custom-success {
  color: var(--success-color);
}


.nav {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #734a92;
  /* your color */
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.writers-slider .item {
  height: 575px;
  overflow-y: auto;
  overflow-x: hidden;
}

.review-slider .item {
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

.review-slider .item {
  height: 365;
  overflow-y: auto;
  overflow-x: hidden;
}

.floating-btn {
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: pulseGlow 2s infinite;
  transition: transform 0.3s ease;
}

/* Glowing pulse with scale animation */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    transform: scale(1.15);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    transform: scale(1);
  }
}