@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    font-family: "Inter", sans-serif;
}
body {
    @apply h-full overflow-x-hidden font-normal text-slate-600 dark:bg-[#131217] dark:text-slate-900 leading-7;
}
.btn {
    @apply relative px-6 py-3 rounded capitalize text-sm font-semibold transition-all hover:ring-offset-2 hover:ring-2;
}

.btn.btn-sm {
    @apply py-2 text-xs;
}

.btn-primary {
    @apply  border border-primary text-white bg-primary hover:ring-primary;
}

.btn-dark {
    @apply  border border-neutral-900 text-white bg-neutral-900 hover:ring-neutral-900 dark:bg-neutral-950 dark:ring-offset-neutral-950;
}

.btn-light {
    @apply  text-gray-800 border border-white bg-white hover:ring-white;
}

.btn-outline-dark {
    @apply text-gray-800 border border-gray-800 hover:bg-gray-800 hover:ring-gray-800 hover:text-white dark:text-gray-100 dark:border-gray-100 dark:hover:bg-gray-100 dark:hover:ring-gray-100 dark:hover:text-gray-900;
}

.btn-outline-light {
    @apply text-white border hover:bg-white hover:ring-white hover:text-gray-800;
}

.submenu {
    @apply absolute top-full min-w-max bg-white shadow-xl invisible z-50 py-3 mt-5 rounded-lg opacity-0 transition-all ease-in duration-150;
}

.group:hover .submenu {
    @apply visible mt-0 opacity-100;
}

.card {
    @apply rounded-md dark:bg-[#19181d];
}

.owl-nav {
    @apply flex absolute top-1/2 left-1/2 w-[98%] justify-between -translate-y-1/2 -translate-x-1/2;
}

.slider .owl-nav {
    @apply w-[102.5%];
}

.owl-nav button {
    @apply flex items-center justify-center text-base !p-2 rounded !bg-gray-200 hover:!bg-primary hover:!text-white dark:!bg-neutral-800 dark:!text-gray-300;
}

.owl-dots {
    @apply absolute bottom-5 left-1/2 -translate-x-1/2;
}

.owl-dots .owl-dot {
    @apply h-2 w-2 mx-1 !bg-white bg-opacity-70 rounded-sm;
}

.owl-dots .owl-dot.active {
    @apply w-7 bg-opacity-100;
}

.market-trend-carousel .owl-stage-outer, .offices-carousel .owl-stage-outer {
    @apply py-5;
}

.market-trend-carousel .owl-nav, .offices-carousel .owl-nav {
    @apply w-full top-auto -bottom-14;
}

#countdown {
    @apply text-gray-100;
}

#countdown span {
    @apply p-2 bg-neutral-950 text-white text-lg rounded mr-1;
}

.news-animation > div {
    @apply flex items-center justify-start w-full h-full absolute top-0 left-0 whitespace-nowrap transition-all;
}
.news-animation .news-item {
    display: flex;
    animation: scrollText 10s infinite linear;
}

@keyframes scrollText {
    from   { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

.market-trend-carousel .owl-item{    height: 250px;}
.card {height: 100%;}