body {
font-family: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth;
}

[dir="rtl"] {
font-family: 'Noto Nastaliq Urdu', serif;
text-align: right;
}

.orb{
position:absolute;
border-radius:9999px;
filter:blur(40px);
opacity:.6;
mix-blend-mode:multiply;
}

/* large soft base */
.orb1{
width:260px;
height:260px;
background:#2f6f4f;
top:40px;
left:20px;
animation:floatA 14s ease-in-out infinite;
}

/* yellow energy */
.orb2{
width:200px;
height:200px;
background:#f2c94c;
top:140px;
left:120px;
animation:floatB 16s ease-in-out infinite;
}

/* secondary green */
.orb3{
width:180px;
height:180px;
background:#3f8a61;
top:10px;
right:40px;
animation:floatC 12s ease-in-out infinite;
}

/* accent */
.orb4{
width:140px;
height:140px;
background:#f2c94c;
bottom:10px;
left:30px;
animation:floatB 18s ease-in-out infinite;
}

/* small energy */
.orb5{
width:120px;
height:120px;
background:#2f6f4f;
bottom:60px;
right:30px;
animation:floatC 15s ease-in-out infinite;
}

@keyframes floatA{
0%{transform:translate(0,0)}
50%{transform:translate(20px,-25px)}
100%{transform:translate(0,0)}
}

@keyframes floatB{
0%{transform:translate(0,0)}
50%{transform:translate(-20px,20px)}
100%{transform:translate(0,0)}
}

@keyframes floatC{
0%{transform:translate(0,0)}
50%{transform:translate(15px,-15px)}
100%{transform:translate(0,0)}
}

@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.animate-bounce-slow {
  animation: bounceSlow 2.5s infinite;
}


/* Urdu mode */
body.urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  line-height: 1.9;
}

/* headings need even more space */
body.urdu h1,
body.urdu h2,
body.urdu h3 {
  line-height: 2.2;
}

/* paragraphs */
body.urdu p {
  line-height: 2;
}

/* buttons look cramped otherwise */
body.urdu a {
  line-height: 1.8;
}