@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: "Galano";
    src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf');
}
@layer components{
    .super-hero-title{
        @apply  text-white text-[135px] tracking-wider font-[400] font-galano leading-[90px]
    }

    .hero-title{
        @apply  text-theme-dark  text-[75px] tracking-wider font-[400] font-galano leading-[90px]
    }


    .title-1-cn{
        @apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-cnnote  leading-[56px]
    }

    .title-2-cn{
        @apply text-theme-dark text-[24px] tracking-[1px] font-[800] font-cnnote  leading-[33px]
    }
    .subTitle-1-cn{
        @apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-cnnote leading-[42px]
    }
    .content-1-cn{
        @apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-cnnote  leading-[20px]
    }


    .title-1-en{
        @apply  text-theme-dark  text-[75px] tracking-wider font-[400] font-galano leading-[90px]
    }


    .int-font-1{
        @apply font-bebas text-[40px] font-[400]
    }
    .int-font-hero{
        @apply font-bebas font-[700] text-[90px] ml-[5px] text-right tracking-widest leading-[91px]
    }
    .int-font-sub{
        @apply font-bebas font-[700] text-[20px] ml-[25px]  tracking-widest leading-[20px]
    }
    

    .sub-title-cn{
        @apply   text-theme-dark text-[24px] tracking-wide font-cnnote font-bold screen:py-3 py-1
    }
    .content-title-cn{
        @apply   text-theme-dark text-[20px]  tracking-wide font-cnnote font-bold py-3
    }
    .content-sub-title-cn{
        @apply   text-theme-dark text-[14px] tracking-wide font-cnnote font-bold py-3
    }
    .content-sub2-title-cn{
        @apply   text-theme-dark text-[16px] tracking-wide font-cnnote font-bold py-3
    }
    .normal-content{
        @apply  text-theme-dark  text-[14px] tracking-wide font-cnnote font-normal
    }
    .normal-text{
        @apply  text-theme-dark  text-[12px] tracking-wide font-cnnote font-normal
    }
    .des-cn{
        @apply font-galano font-light text-theme-dark text-[14px]
    }
    .table-header{
        @apply text-white bg-black py-3 px-2 font-cnnote
    }
    .hoverGlass{
        @apply flex cursor-pointer
        hover:rounded-lg 
        hover:bg-white/30 hover:shadow-sm
        px-8 py-7 rounded-lg transition-all duration-150 
        relative
    }
    .hoverGlass:hover span{
        @apply visible transition-all duration-150 
    }
    .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);
}

.verticalText{
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
}
.clip-title{
/* 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}