@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: "Galano";
    src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf');
}

@layer components{
    .hero-title{
        @apply  text-theme-dark  text-[78px] labtop:text-[68px]  screen:text-[90px] tracking-wider font-bold font-galano leading-[90px]
    }
    .sub-title-cn{
        @apply   text-theme-dark text-[16px] labtop:text-[26px] screen:text-[30px] tracking-wide font-mono font-bold screen:py-3 py-1
    }
    .content-title-cn{
        @apply   text-theme-dark text-[22px] labtop:text-[22px] screen:text-[24px] tracking-wide font-mono font-bold py-3
    }
    .content-sub-title-cn{
        @apply   text-theme-dark text-[14px] labtop:text-[16px] tracking-wide font-mono font-bold py-3
    }
    .normal-text{
        @apply  text-theme-dark  text-[12px] labtop:text-[14px] screen:text-[14px] tracking-wide font-mono font-normal
    }
    .des-cn{
        @apply font-galano font-light text-theme-dark
    }
    .table-header{
        @apply text-white bg-black py-3 px-2
    }
    .hoverGlass{
        @apply flex cursor-pointer
        hover:shadow-lg  hover:backdrop-blur-sm 
        hover:backdrop-brightness-105
        px-8 py-7 rounded-lg transition-all duration-150 
        relative
    }
    .featuresGrid{
        @apply grid grid-cols-2 w-full labtop:w-10/12 gap-y-[1rem]  gap-x-[3.5rem] screen:gap-y-[5rem] screen:gap-x-[10rem]
    }
}
boby{
    @apply font-['arial']
}
.hero-baas{
    background: linear-gradient(120deg,#0425F3 30%,#2711AC 40%,#00BBE8 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 。56rem 。61rem 5rem rgba(55, 107, 227, 0.6);
}
.clip-title{
/* 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}