@import 'accordion.min.css';
@import 'aos.css';
@import 'fancybox.css';
@import 'style.css';
@import 'swiper-bundle.min.css';

@font-face {
    font-family: 'reey';
    src: url('../fonts/reey-regular-webfont.woff2') format('woff2'), url('../fonts/reey-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

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

@layer components {
    .btn {
        @apply inline-block rounded-2xl bg-primary py-4 px-7 text-center text-sm font-extrabold uppercase text-black transition  hover:scale-105 hover:bg-secondary hover:text-white;
    }
    .heading {
        @apply mb-10 lg:mb-14;
    }
    .heading h6 {
        @apply mb-3 text-lg font-extrabold text-primary sm:mb-4;
    }
    .heading h4 {
        @apply text-2xl font-extrabold text-black dark:text-white sm:text-3xl lg:text-[40px] lg:!leading-[50px];
    }
    .portfolio-filter .filter.active button,
    .upcoming-party-filter .filter.active button {
        @apply bg-secondary text-white;
    }
    .upcoming-party-filter .filter.active button span {
        @apply text-white;
    }
    .home-filter .filter.active button {
        @apply text-secondary;
    }
    .realestate-filter .filter.active button {
        @apply scale-105 bg-primary text-white;
    }

    .photography-filter .filter.active button {
        @apply bg-secondary text-white;
    }

    /* NFT Landing Page CSS */
    .nft-filters li.active button {
        @apply bg-black text-white dark:bg-white dark:text-black;
    }
    .heading-gradiant {
        @apply mb-12;
    }
    .heading-gradiant h4 {
        @apply relative z-[1] text-3xl font-black uppercase leading-[50px] text-black before:absolute before:top-5 before:z-[-1] before:h-6
        before:w-[100px] before:bg-primary/20 ltr:pl-0.5 ltr:before:left-0 ltr:before:right-auto rtl:pr-0.5 rtl:before:right-0 rtl:before:left-auto dark:text-white md:text-[40px] md:leading-[60px] md:before:h-[30px];
    }
    .heading-gradiant h4 span {
        @apply bg-gradient-to-r from-secondary to-primary bg-clip-text text-transparent;
    }
    .heading-gradiant p {
        @apply mt-3 font-bold;
    }
    /* --------- NFT - END -------- */

    /* Filter */

    .project.hidden {
        animation: hide 1s ease 0s 1 normal forwards;
        transform-origin: center;
    }
    .project.block {
        animation: show 1s ease 0s 1 normal forwards;
        transform-origin: center;
    }

    @keyframes hide {
        0% {
            transform: scale(1);
            visibility: visible;
        }
        100% {
            transform: scale(0);
            visibility: hidden;
        }
    }
    @keyframes show {
        0% {
            transform: scale(0);
            visibility: hidden;
        }
        100% {
            transform: scale(1);
            visibility: visible;
        }
    }

    /* Light - Dark Mode */

    .dark .light-mode-btn {
        @apply block;
    }
    .dark .dark-mode-btn {
        @apply hidden;
    }

    /* Header */
    .bg-hero {
        @apply bg-[url(images/inner-page-hero-bg.png)] bg-cover bg-bottom bg-no-repeat;
    }

    header .menus {
        @apply fixed top-0 z-[52] h-screen w-full max-w-sm gap-9 bg-white transition-all duration-500 ltr:-right-full rtl:-left-full dark:bg-gray-dark lg:static lg:h-auto lg:max-w-none lg:bg-transparent dark:lg:bg-transparent;
    }
    header .menus > ul {
        @apply relative flex flex-col divide-y divide-gray-100 font-bold text-black lg:flex-row lg:items-center lg:gap-11 lg:divide-y-0 lg:p-0 lg:text-white;
    }
    header .menus > ul li > a {
        @apply flex items-center justify-between py-4 px-4 transition hover:text-secondary dark:text-white dark:hover:text-secondary lg:px-0 lg:py-10 hover:lg:scale-110;
    }
    header .menus > ul li > a.active {
        @apply text-secondary lg:scale-110;
    }
    header .menus .submenu {
        @apply invisible z-50 mt-5 hidden grid-cols-1 gap-x-4 rounded-lg py-3 text-sm font-medium text-black opacity-0 transition-all dark:text-white lg:absolute lg:top-full lg:grid lg:min-w-max rtl:lg:translate-x-1/4 ltr:lg:-translate-x-1/4 lg:grid-cols-3 lg:bg-[#F0F4F7] lg:shadow-lg lg:dark:bg-[#060818] rtl:xl:-right-1/2 ltr:xl:-left-1/2 xl:grid-cols-4;
    }
    .submenu {
        @apply group-hover:visible group-hover:mt-0 group-hover:grid group-hover:opacity-100;
    }
    header .menus .submenu a {
        @apply block py-2.5 px-8 transition hover:text-secondary lg:px-5 hover:lg:scale-105;
    }
    header .menus .submenu a.active {
        @apply text-secondary lg:scale-105;
    }

    .text-stroke {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #222a36;
    }

    /* Creative Agency Page CSS */
    .text-color {
        @apply bg-[url(../images/creative/color.png)] bg-clip-text bg-top bg-no-repeat text-transparent;
    }
}

/* responsive menu */

header .menus.open-menus {
    @apply overflow-y-auto ltr:right-0 rtl:left-0;
}

/* sticky header */

.sticky-header {
    @apply bg-black shadow-lg;
}

/* lightbox */

.fancybox__content > .carousel__button.is-close {
    @apply rtl:left-0;
}

/* accordion */

.ac.is-active .ac-trigger .trigger-icon {
    @apply !border-black !text-black dark:!border-white dark:!text-white;
}

.ac.is-active .ac-trigger .trigger-icon svg path {
    @apply first:hidden;
}
.open-search-bar {
    @apply w-full;
}

/* apex chart */

.dark .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light,
.dark .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-theme-light {
    box-shadow: none;
    @apply border-[#050717cc] bg-[#050717cc] text-white;
}

.dark .apexcharts-canvas .apexcharts-xaxistooltip-bottom:before,
.dark .apexcharts-canvas .apexcharts-xaxistooltip-bottom:after {
    @apply border-b-[#050717cc];
}

.dark .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
    @apply text-white;
}

.dark .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    @apply border-[#060818] bg-[#060818];
}

.dark .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
    box-shadow: none;
}

[dir='rtl'] .apexcharts-tooltip-marker {
    @apply mr-0 ml-2.5;
}

/* Hotel & resort */
.book-form input[type='date']::-webkit-calendar-picker-indicator {
    @apply invert;
}

/* Photography our Team */

.our-team .swiper-wrapper {
    @apply items-center;
}

.our-team .swiper-slide img {
    @apply h-[390px];
}

.our-team .swiper-slide.swiper-slide-prev img,
.our-team .swiper-slide.swiper-slide-next img {
    @apply h-[478px];
}

.our-team .swiper-slide.swiper-slide-active img {
    @apply h-[566px];
}

@media screen and (max-width: 1200px) {
    .our-team .swiper-slide img {
        @apply h-[300px];
    }

    .our-team .swiper-slide.swiper-slide-prev img,
    .our-team .swiper-slide.swiper-slide-next img {
        @apply h-[400px];
    }

    .our-team .swiper-slide.swiper-slide-active img {
        @apply h-[500px];
    }
}

@media screen and (max-width: 767px) {
    .our-team .swiper-slide img {
        @apply !h-[300px];
    }
}