@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base{
   *{
      @apply font-primary
   }
   .container{
      @apply relative w-full mr-auto ml-auto pr-[12px] pl-[12px] 2xl:max-w-[1536px] 2xl:pl-[13rem] 2xl:pr-[13rem] xl:max-w-[1280px] xl:pl-[5rem] xl:pr-[5rem] lg:max-w-[1024px] lg:pl-[45px] lg:pr-[45px] md:max-w-[768px] md:pl-[15px] md:pr-[15px]
   }  
   section{
      @apply py-[50px] md:py-[80px] max-w-[1145px] px-8 lg:px-0 mx-auto
   }
   .tab__item{
      @apply relative transition-all duration-300 hover:bg-sky-600/10 flex items-center w-full text-left text-slate-400 cursor-pointer h-[42px] p-[0px_25px_2px] border-l-[2px] border-l-[#233554]
   }
   .__navright{
      @apply flex items-center gap-6 cursor-pointer
   }
   .__navright span {
      @apply text-sky-500
   }
   a{
      @apply cursor-pointer
   }
}

*{
   scroll-behavior: smooth;   
}

.rl{
   writing-mode: vertical-rl;
}

::-webkit-scrollbar, .scrollbar::-webkit-scrollbar {
   width: 0.6rem;
   background-color: var(--scroll-bar-color);
}
::-webkit-scrollbar-thumb, .scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--scroll-thumb-color);
   border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover, .scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: var(--text-color-light);
}