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

@font-face {
    font-family: "mona_regular";
    src: url("/fonts/regular.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "mona_bold";
    src: url("/fonts/bold.woff2") format("woff2");
    font-display: swap;
    font-weight: 800;
}
@font-face {
    font-family: "mona_wide_semibold";
    src: url("/fonts/semi_bold_wide.woff2") format("woff2");
    font-display: swap;
    font-weight: 600;
}
@font-face {
    font-family: "mona_bold_wide";
    src: url("/fonts/bold_wide.woff2") format("woff2");
    font-display: swap;
}

html,
body {
    font-family: "mona_regular", sans-serif;
}
@layer components {
    .d {
        @apply border-2 border-red-900 border-solid;
    }
    .w-container {
        @apply max-w-screen-2xl mx-auto md:w-11/12 lg:w-10/12 px-3;
    }
    .w-container-full {
        @apply md:w-11/12 px-3 max-w-[1536px] mx-auto;
    }
    .text-mega {
        @apply text-[5rem] md:text-[7rem] lg:text-[9rem] xl:text-[11.5rem];
    }
    .banner {
        @apply min-h-[500px] lg:min-h-screen;
    }
    .blade-padding {
        @apply py-16 sm:py-20 md:py-24 lg:py-28 xl:py-36 2xl:py-40;
    }
    .blade-padding-lg {
        @apply py-20 sm:py-24 md:py-28 lg:py-32 xl:py-44 2xl:py-52;
    }
    .blade-margin {
        @apply my-16 sm:my-20 md:my-24 lg:my-28 xl:my-36 2xl:my-40;
    }
    .blade-padding-sm {
        @apply py-10 sm:py-12 md:py-16 lg:py-20;
    }
    .blade-padding-xs {
        @apply py-6 sm:py-8 md:py-12 lg:py-16;
    }
    .blade-bottom-padding {
        @apply pb-10 sm:pb-12 md:pb-16 lg:pb-20;
    }
    .blade-bottom-margin {
        @apply mb-10 sm:mb-12 md:mb-16 lg:mb-20;
    }
    .blade-bottom-margin-lg {
        @apply mb-20 sm:mb-24 md:mb-28 lg:mb-32 xl:mb-44;
    }

    .blade-top-padding {
        @apply pt-10 sm:pt-12 md:pt-16 lg:pt-20;
    }
    .blade-top-margin {
        @apply mt-10 sm:mt-12 md:mt-16 lg:mt-20;
    }
    .blade-top-margin-lg {
        @apply mt-20 sm:mt-24 md:mt-28 lg:mt-32 xl:mt-44;
    }

    .spaced-text {
        word-spacing: 4px;
    }
    .list-style {
        @apply md:text-lg xl:text-xl text-base;
    }
    .error-text {
        @apply text-base text-red-500 font-normal mt-1;
    }
}

.bg-grdient-violet-light {
    background: linear-gradient(
        180deg,
        rgba(114, 82, 254, 0.1) 0%,
        rgba(127, 53, 239, 0.1) 108.61%
    );
}

.shine-effect {
    position: relative;
}
.shine-effect:after {
    content: "";
    position: absolute;

    left: 100%;
    bottom: 130%;
    width: 180%;
    height: 100%;
    transform: rotate(65deg) translateY(45%);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0) 60%
    );
    filter: blur(3px);
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
.shine-effect:hover:after {
    left: -100%;
    bottom: -100%;
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: all 1.2s ease-out;
    -moz-transition: all 1.2s ease-out;
    transition: all 1.2s ease-out;
}

.shine-effect-continuous {
    position: relative;
}
.shine-effect-continuous:after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 130%;
    width: 180%;
    height: 100%;
    transform: rotate(45deg) translateY(45%);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    filter: blur(3px);
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
.shine-effect-continuous:hover:after {
    left: -100%;
    bottom: -100%;
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

/*  scrollbar design  */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #040418;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #040418;
}

::-webkit-scrollbar-track {
    background-color: #d8d8d8;
}

::-webkit-scrollbar-track:hover {
    background-color: #d8d8d8;
}

.diamond-blade {
    background-position: left 50% bottom -10px;
    background-size: min(100%, 400px) auto;
}

@media screen and (max-width: 768px) {
    .diamond-blade {
        background-size: 45% auto;

        background-position: center bottom 0px;
    }
}
@media screen and (max-width: 512px) {
    video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }
}

.bg-footer-element {
    background: url("../assets/footer/footer.png");
    background-repeat: no-repeat;
    background-position: bottom left;
}

.bg-eclipse {
    background-image: radial-gradient(#7e2eed1e 10%, transparent 40%);
}

.conic {
    height: 30rem;
    width: 30rem;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: -1;
    background: repeating-conic-gradient(
            from 7.5deg at 50% 50%,
            transparent 0 20deg,
            #7d2eed 0 30deg
        ),
        radial-gradient(circle, #a584ff34 10%, #7d2eed 70%);
    border-radius: 50%;
    box-shadow: 0 0 500px #7d2eed;
}

.blur-gradient {
    position: relative;
}

.blur-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    filter: blur(80px);
    background: radial-gradient(#7d2eed 0%, transparent 60%);
}

.bg-txt-transition {
    background: #7d2eed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.animate-map-bg {
    position: absolute;
    z-index: 10 !important;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.animate-map-bg::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background: radial-gradient(#7e2eed8a 10%, transparent 50%);
    filter: blur(20px);
    animation: bg-anime 5s infinite ease-in-out;
}

@keyframes bg-anime {
    from {
        transform: translate(180%, 20%) scale(3);
    }
    to {
        transform: translate(-100%, 0%);
    }
}

.buyerr-text .text-shine-effect {
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 100%;
    transform: rotate(45deg) translate(-20%, 30%);
    background: linear-gradient(
        to bottom,
        #ffffff00,
        rgba(255, 255, 255, 0.535),
        #ffffff00
    );
    background-size: 100%;
    animation: shine-animation 1.5s linear;
}

@keyframes shine-animation {
    from {
        left: 100%;
    }
    to {
        left: -80%;
    }
}

.industry-banner-text-wrapper .text-reveal-max span {
    animation: textReveal 1s ease-in-out;
    white-space: normal;
}
.industry-banner-text-wrapper .text-reveal-min span {
    animation: textRevealMin 1s ease-in-out;
    white-space: normal;
}

@keyframes textRevealMin {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.editor ul {
    color: black;
    list-style: disc !important;
}
.editor ol {
    color: black;
    list-style: decimal !important;
}

.ques-container ul {
    @apply list-disc ml-8 text-base leading-normal mt-3;
}

.footer-wrapper {
    display: flex;
    align-items: flex-start;
}

.footer-wrapper a {
    opacity: 70%;
    transition: opacity 500ms ease;
}
.footer-wrapper a:hover {
    opacity: 100%;
}

@media (max-width: 786px) {
    .footer-wrapper {
        flex-direction: column;
    }
}