@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


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

.gbox{z-index:-999;position:relative}
.gradient{position:fixed;width:400px;height:400px;border-radius:50%;filter:blur(80px);opacity:.7}

.blue{background:#b8d4fc;top:0;left:0}
.pink{background:#f7c6e6;bottom:0;left:10%}
.purple{background:#e2c7fa;top:10%;right:0;opacity:.5}
.green{background:#c4f1da;bottom:0;right:10%;opacity:.5}

/*Deep gradient */
.green {background:#f1ecc4;} .green, .purple{width:600px;height:600px;}

.bg-blue-x {background-color: rgb(248 249 252 / 1);}

.bg-sun  {
  border-radius: 500px;
  background: linear-gradient(90deg,#195ee6 -.55%,#8b44ff 45.76%,#f64 66.05%,#ffdf70 99.34%);
  filter: blur(100px);
}

@media (max-width: 768px) {
.gradient{width:350px;height:350px;opacity:.7;filter:blur(60px)}
.purple{top:40%}
.green{background:#f1ecc4;bottom:10%;left:0}
}

.container1{max-width:800px;margin:auto}

.shadow-xl2 {
  box-shadow: 0px 4px 24px rgba(4, 20, 58, 0.04);
  border: 1px solid #e6e7eb;
}

:root {
  --color-1: linear-gradient(140deg, #8be8b0, #34d707);
  --shadow-1: 0 6px 12px #48bb7880;
  --color-2: linear-gradient(140deg, #60a5fa, #2563eb);
  --shadow-2: 0 6px 12px #2563eb80;
  --color-3: linear-gradient(140deg, #fde68a, #eab308);
  --shadow-3: 0 6px 12px #eab30880;
  --color-4: linear-gradient(140deg, #f87171, #dc2626);
  --shadow-4: 0 6px 12px #dc262680;
  --color-5: linear-gradient(140deg, #d8b4fe, #a855f7);
  --shadow-5: 0 6px 12px #a855f780;
  --color-6: linear-gradient(140deg, #5eead4, #14b8a6);
  --shadow-6: 0 6px 12px #14b8a680;
  --color-7: linear-gradient(140deg, #a5b4fc, #4f46e5);
  --shadow-7: 0 6px 12px #4f46e580;
  --color-8: linear-gradient(140deg, #fdba74, #f97316);
  --shadow-8: 0 6px 12px #f9731680;
  --color-9: linear-gradient(140deg, #6ee7b7, #10b981);
  --shadow-9: 0 6px 12px #10b98180;
  --color-10: linear-gradient(140deg, #7dd3fc, #0ea5e9);
  --shadow-10: 0 6px 12px #0ea5e980;
  --color-11: linear-gradient(140deg, #bef264, #84cc16);
  --shadow-11: 0 6px 12px #84cc1680;
  --color-12: linear-gradient(140deg, #c4b5fd, #8b5cf6);
  --shadow-12: 0 6px 12px #8b5cf680;
  --color-13: linear-gradient(140deg, #f0abfc, #d946ef);
  --shadow-13: 0 6px 12px #d946ef80;
  --color-14: linear-gradient(140deg, #67e8f9, #06b6d4);
  --shadow-14: 0 6px 12px #06b6d480;
  --color-15: linear-gradient(140deg, #f9a8d4, #ec4899);
  --shadow-15: 0 6px 12px #ec489980;
  --color-16: linear-gradient(140deg, #fda4af, #f43f5e);
  --shadow-16: 0 6px 12px #f43f5e80;
}


/* Icon Style */
.icon-container{border:1px solid #ddd;border:1px solid #eef;padding:10px;display:inline-block;border-radius:1.5rem;background:transparent;margin:6px}
.icon-wrapper{border:4px solid transparent;border-radius:1.5rem;box-shadow:2px 3px 5px #0000001a;display:inline-block;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.icon-inner{width:56px;height:56px;border-radius:1.5rem;display:flex;align-items:center;justify-content:center;position:relative}
.icon-download{width:32px;height:32px;color:#fff;filter:drop-shadow(0 1px 2px #ffffff9c)}

.grid > div:nth-child(16n+1) .icon-inner{background:var(--color-1);box-shadow:var(--shadow-1)}
.grid > div:nth-child(16n+2) .icon-inner{background:var(--color-2);box-shadow:var(--shadow-2)}
.grid > div:nth-child(16n+3) .icon-inner{background:var(--color-3);box-shadow:var(--shadow-3)}
.grid > div:nth-child(16n+4) .icon-inner{background:var(--color-4);box-shadow:var(--shadow-4)}
.grid > div:nth-child(16n+5) .icon-inner{background:var(--color-5);box-shadow:var(--shadow-5)}
.grid > div:nth-child(16n+6) .icon-inner{background:var(--color-6);box-shadow:var(--shadow-6)}
.grid > div:nth-child(16n+7) .icon-inner{background:var(--color-7);box-shadow:var(--shadow-7)}
.grid > div:nth-child(16n+8) .icon-inner{background:var(--color-8);box-shadow:var(--shadow-8)}
.grid > div:nth-child(16n+9) .icon-inner{background:var(--color-9);box-shadow:var(--shadow-9)}
.grid > div:nth-child(16n+10) .icon-inner{background:var(--color-10);box-shadow:var(--shadow-10)}
.grid > div:nth-child(16n+11) .icon-inner{background:var(--color-11);box-shadow:var(--shadow-11)}
.grid > div:nth-child(16n+12) .icon-inner{background:var(--color-12);box-shadow:var(--shadow-12)}
.grid > div:nth-child(16n+13) .icon-inner{background:var(--color-13);box-shadow:var(--shadow-13)}
.grid > div:nth-child(16n+14) .icon-inner{background:var(--color-14);box-shadow:var(--shadow-14)}
.grid > div:nth-child(16n+15) .icon-inner{background:var(--color-15);box-shadow:var(--shadow-15)}
.grid > div:nth-child(16n+16) .icon-inner{background:var(--color-16);box-shadow:var(--shadow-16)}
/*
.grid > div .icon-inner{background:var(--color-4);box-shadow:var(--shadow-4)} */

.floatY{animation:floatY 8s ease-in-out infinite}
@-webkit-keyframes floatY {
0,100%{-webkit-transform:translatey(0);transform:translatey(0)}
50%{-webkit-transform:translatey(-20px);transform:translatey(-20px)}
}
@keyframes floatY {
0,100%{-webkit-transform:translatey(0);transform:translatey(0)}
50%{-webkit-transform:translatey(-20px);transform:translatey(-20px)}
}
.redbtn{background-image:linear-gradient(45deg,#F32121,#D400D1);box-shadow:0 20px 38px 0 #c92f2f78;animation:jump-shaking .9s infinite}
.redbtn:hover{box-shadow:0 2px 25px #fff3;transform:translateY(-5px);animation:none}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(2deg) }
  55% { transform: translateY(-9px) rotate(-2deg) }
  65% { transform: translateY(-9px) rotate(2deg) }
  75% { transform: translateY(-9px) rotate(-2deg) }
  100% { transform: translateY(0) rotate(0) }
}