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

.photo_logo {
    background-image: url('https://traderplus.info/assets/logo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height:300px;
}
.dark table td{
    color: white !important;
}

table td {
    color: #311B92 !important;
}

/* npx tailwindcss -i ./assets/css/style.css -o ./assets/css/output.css --watch */
@font-face {
    font-family: Yekan;
    src: url("../fonts/Weblogma_Yekan.eot") format("eot"),
        url("../fonts/Weblogma_Yekan.otf")format("otf"),
        url("../fonts/Weblogma_Yekan.ttf") format("ttf"),
        url("../fonts/Weblogma_Yekan.woff")format("woff")
}

body {
    font-family: Yekan;
}
html{
    overflow-x: hidden;
}
@layer components {
    body {
        @apply dark:bg-gray-800 bg-global-slate-1 text-global-slate-3 dark:text-white overflow-x-hidden
    }

    .custom-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .custom-shadow-light {
        box-shadow: 0 0 10px rgba(250, 250, 250, 0.4);
    }
    #label-switch-light{
        @apply cursor-pointer duration-300 hover:custom-shadow  p-2 rounded-full
    }
    a {
        @apply dark:text-gray-100 dark:hover:text-gray-300 text-global-slate-3 hover:text-global-slate-4 duration-300
    }

    .black-page {
        background-color: rgba(53, 53, 53, .2);
    }

    .userAnalysis-swiper-button-next {
        @apply dark:bg-gray-200 dark:text-global-slate-3 bg-global-slate-4 text-gray-200 dark:hover:bg-gray-300 px-4 py-10 rounded-r-full text-xl absolute -left-2 top-[35%] z-10 hover:custom-shadow border-2 duration-300
    }

    .userAnalysis-swiper-button-prev {
        @apply dark:bg-gray-200 dark:text-global-slate-3 bg-global-slate-4 text-gray-200 dark:hover:bg-gray-300 px-4 py-10 rounded-l-full text-xl absolute -right-2 top-[35%] z-10 hover:custom-shadow border-2 duration-300
    }

    /*  */
    header {
        @apply p-4 custom-shadow dark:bg-gray-700 top-0 bg-global-slate-2 z-20
    }

    .header-1 {
        @apply container flex items-center justify-between gap-4
    }

    .header-bars {
        @apply block lg:hidden text-2xl cursor-pointer mt-2
    }

    .header-2 {
        @apply flex justify-center items-center mr-12 lg:mr-0
    }

    .header-nav {
        @apply flex-1 lg:relative fixed duration-300 flex flex-col gap-2 lg:block
    }

    .header-nav-1 {
        @apply flex items-center justify-between lg:hidden border-b pb-2
    }

    .header-nav-2 {
        @apply flex flex-col items-center lg:flex-row gap-3
    }

    .header-nav-2-item {
        @apply hover:text-global-slate-4
    }

    .header-3 {
        @apply flex items-center gap-2
    }

    .header-3-1 {
        @apply flex flex-col justify-center ml-3
    }

    .header-3-1-label {
        @apply relative cursor-pointer hover:custom-shadow flex items-center justify-center p-2 rounded-full
    }

    .header-3-1 .svg-light {
        @apply dark:hidden translate-x-[2px] translate-y-[1px]
    }

    .header-3-1 .svg-dark {
        @apply hidden dark:block translate-x-[2px] translate-y-[1px]
    }

    .header-3-2 {
        @apply px-4 py-2 rounded-full hover:custom-shadow duration-300 border-2 border-gray-400 dark:hover:bg-gray-800 hover:bg-gray-300
    }

    main {
        @apply flex flex-col gap-4
    }

    .trader-landing {
        @apply shadow px-6 py-12 relative
    }

    .trader-landing #particles-js {
        @apply absolute top-0 bottom-0 right-0 left-0
    }

    .trader-landing-1 {
        @apply container p-4 flex flex-col gap-4
    }

    .h1-trader-landing {
        @apply text-6xl text-blue-600 text-center my-3
    }

    .h4-trader-landing {
        @apply text-5xl text-blue-400 text-center my-3
    }

    .trader-landing-desc {
        @apply text-center text-xl text-gray-500
    }

    .trader-landing-2 {
        @apply container flex items-center justify-center gap-4 pb-10 z-10 relative
    }

    .trader-landing-2 a {
        @apply md:text-lg text-sm px-4 text-white hover:text-gray-200 py-2 rounded-full bg-gradient-to-l to-purple-900 from-blue-900 hover:to-purple-800 hover:from-blue-800 duration-300
    }

    .trader-title {
        @apply text-3xl font-bold mb-4 text-center mt-6
    }

    .swiper-slide-item {
        @apply relative after:absolute after:w-0 overflow-hidden dark:after:bg-gray-600 bg-gray-100 after:bg-gray-200 after:right-0 after:top-0 after:bottom-0 dark:bg-gray-700 hover:after:w-full after:duration-300 after:-z-10 p-2 rounded flex flex-col gap-2 custom-shadow cursor-pointer
    }

    .slide-item-title {
        @apply text-center text-lg
    }

    .slide-item-top {
        @apply flex items-center justify-between
    }

    .slide-item-top .slide-item-top-1 {
        @apply flex items-center gap-1
    }

    .slide-item-top img {
        @apply w-6 h-6 rounded-full
    }

    .slide-item-center img {
        @apply w-full rounded my-4
    }

    .slide-item-bottom {
        @apply flex items-center justify-between my-2
    }

    .slide-item-bottom .slide-item-bottom-1 {
        @apply flex items-center gap-1
    }

    .slide-item-bottom .slide-item-bottom-1 i {
        @apply hover:text-orange-500 duration-300 cursor-pointer
    }

    .box-services {
        @apply flex flex-col my-4 bg-gray-100 dark:bg-gray-700 duration-200 p-4 rounded shadow hover:custom-shadow dark:hover:custom-shadow-light cursor-default
    }

    .boxes-services-section {
        @apply grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 container text-center
    }
}


.bg-grad{
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #581c87 var(--tw-gradient-to-position);
    padding: .5rem; 
}
.bg-grad .header-nav-2-item{
    color: white !important;
}
 
 .bg-grad .header-nav-2-item::before{
    background: white !important;
}
.header-nav-2-item::before{
    content: "";
    position: absolute;
    top: 9px;
    width: 7px;
    height: 7px;
    right: -6px;
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #581c87 var(--tw-gradient-to-position);
    border-radius: 50px;
}

.bg-grad .header-3-2{
    color: white !important;
}

 .slider-title{ 
    width: 100%; 
    overflow: hidden;
    position: relative; 
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap; 
 }

 .swiper-slide:hover{
    transform: translateY(-4px) !important;
    transition: .4s all ease-in-out;
 }

 .dark .swiper-pagination-bullet-active{
    background: white !important;
 }
 

 .table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #e3e6f0;
}
 
.table-container-header:first-child {
    border-radius: calc(.35rem - 1px) calc(.35rem - 1px) 0 0;
}
 
.table-container-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}
.divsignals {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #581c87 var(--tw-gradient-to-position);
    color: white !important;
    font-weight: bold !important;
    text-shadow: gray 1px 0 10px !important;
    height: 50px !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}
.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(63, 62, 62, 0.412);
}