/* Custom Scrollbar for Webkit-based browsers */
 ::-webkit-scrollbar {
   width: 5px;
 }

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

 ::-webkit-scrollbar-thumb {
   background: #555;
   border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
   background: #333;
   cursor: grab;
 }

 /* Custom Scrollbar for Firefox */
 html {
   scrollbar-width: thin;
   scrollbar-color: #555 transparent;
 }

 ::selection {
   background: #8fd6ff;
   color: #222;
 }

 body {
   background-color: black;
   height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
   cursor: default;
 }

 #main {
   min-height: 100vh;
   width: 100vw;
   position: relative;
   overflow-x: hidden;
 }

 #cursor {
   height: 30px;
   width: 30px;
   background-color: #ffffff;
   border-radius: 50%;
   position: fixed;
   z-index: 9;
   pointer-events: none;
   mix-blend-mode: difference;
 }

 @media screen and (max-width:768px) {
   #cursor {
     display: none;
   }
 }

 .mobile-menu {
   transition: all 0.3s ease-in-out;
 }

 .menu-btn {
   transition: all 0.3s ease;
 }

 /* Sidebar hidden offscreen */
 .sidebar {
   transform: translateX(-100%);
   transition: transform 0.3s ease-in-out;
 }

 /* Sidebar visible */
 .sidebar.active {
   transform: translateX(0);
 }

 /* Optional: hide the overlay with Tailwind's utility */
 #sidebar-overlay.hidden {
   display: none;
 }

 .cta {
   display: flex;
   padding: 11px 33px;
   text-decoration: none;
   font-size: 25px;
   color: white;
   background: #6225e6;
   transition: 1s;
   box-shadow: 6px 6px 0 black;
   transform: skewX(-15deg);
   border: none;
   cursor: pointer;
 }

 .cta:focus {
   outline: none;
 }

 .cta:hover {
   transition: 0.5s;
   box-shadow: 10px 10px 0 #fbc638;
 }

 .cta .second {
   transition: 0.5s;
   margin-right: 0px;
 }

 .cta:hover .second {
   transition: 0.5s;
   margin-right: 45px;
 }

 .span {
   transform: skewX(15deg);
 }

 .second {
   width: 20px;
   margin-left: 30px;
   position: relative;
   top: 12%;
 }

 .one {
   transition: 0.4s;
   transform: translateX(-60%);
 }

 .two {
   transition: 0.5s;
   transform: translateX(-30%);
 }

 .cta:hover .three {
   animation: color_anim 1s infinite 0.2s;
 }

 .cta:hover .one {
   transform: translateX(0%);
   animation: color_anim 1s infinite 0.6s;
 }

 .cta:hover .two {
   transform: translateX(0%);
   animation: color_anim 1s infinite 0.4s;
 }

 @keyframes color_anim {
   0% {
     fill: white;
   }

   50% {
     fill: #fbc638;
   }

   100% {
     fill: white;
   }
 }

 .blob {
   position: fixed;
   border-radius: 50%;
   filter: blur(40px);
   z-index: -1;
 }

 .blob:nth-child(1) {
   background: #3b82f6;
   width: 500px;
   height: 500px;
   left: -200px;
   top: -200px;
   opacity: 0.3;
   animation: blob-float 10s ease-in-out infinite;
 }

 .blob:nth-child(2) {
   background: #8b5cf6;
   width: 400px;
   height: 400px;
   right: -100px;
   top: 100px;
   opacity: 0.3;
   animation: blob-float 10s ease-in-out infinite 2s;
 }

 .blob:nth-child(3) {
   background: #ec4899;
   width: 300px;
   height: 300px;
   left: 300px;
   bottom: -100px;
   opacity: 0.3;
   animation: blob-float 10s ease-in-out infinite 1s;
 }

 @keyframes blob-float {

   0%,
   100% {
     transform: translate(0, 0);
   }

   25% {
     transform: translate(50px, -50px);
   }

   50% {
     transform: translate(0, 50px);
   }

   75% {
     transform: translate(-50px, 0);
   }
 }

 #preloader {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000;
   transition: opacity .6s ease;
 }

 #preloader.fade-out {
   opacity: 0;
   pointer-events: none;
 }

 .loader {
   width: 200px;
   max-height: 900px;
   transform-origin: 50% 50%;
   overflow: visible;
 }

 .ci1 {
   fill: var(--higru);
   animation: toBig 3s infinite -1.5s;
   transform-box: fill-box;
   transform-origin: 50% 50%;
 }

 .ciw {
   transform-box: fill-box;
   transform-origin: 50% 50%;
   animation: breath 3s infinite;
 }

 .ci2 {
   fill: var(--higru);
   animation: toBig2 3s infinite;
   transform-box: fill-box;
   transform-origin: 50% 50%;
 }

 .points {
   animation: rot 3s infinite;
   transform-box: fill-box;
   transform-origin: 50% 50%;
 }

 @keyframes rot {
   0% {
     transform: rotate(0deg);
   }

   30% {
     transform: rotate(360deg);
   }

   50% {
     transform: rotate(360deg);
   }

   80% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(0deg);
   }
 }

 @keyframes toBig {
   0% {
     transform: scale(1) translateX(0px);
   }

   30% {
     transform: scale(1) translateX(0px);
   }

   50% {
     transform: scale(10) translateX(-4.5px);
   }

   80% {
     transform: scale(10) translateX(-4.5px);
   }

   100% {
     transform: scale(1) translateX(0px);
   }
 }

 @keyframes toBig2 {
   0% {
     transform: scale(1) translateX(0px);
   }

   30% {
     transform: scale(1) translateX(0px);
   }

   50% {
     transform: scale(10) translateX(4.5px);
   }

   80% {
     transform: scale(10) translateX(4.5px);
   }

   100% {
     transform: scale(1) translateX(0px);
   }
 }

 @keyframes breath {
   15% {
     transform: scale(1);
   }

   40% {
     transform: scale(1.1);
   }

   65% {
     transform: scale(1);
   }

   90% {
     transform: scale(1.1);
   }
 }

 .dwf,
 .share {
   position: fixed;
   bottom: 4px;
   right: 10px;
   background-color: #0003;
   padding: 3px;
   border-radius: 3px;
 }

 body.noscroll {
   overflow: hidden;
   height: 100vh;
 }

 .text {
   font-size: 8vw;
   text-align: center;
   font-family: "Oi", serif;
   font-style: normal;
   display: inline-block;
   cursor: default;
 }

 .text span {
   transition: color 0.3s ease;
   color: rgb(255, 255, 255);
 }