@font-face {
    font-family: 'NeoSans';
    src: url('../fonts/NeoSans/NeoSans-Regular.ttf') format("truetype");
    font-weight: 400
}

@font-face {
    font-family: 'NeoSans';
    src: url('../fonts/NeoSans/NeoSans-Medium.ttf') format("truetype");
    font-weight: 500
}

@font-face {
    font-family: 'NeoSans';
    src: url('../fonts/NeoSans/NeoSans-bold.ttf') format("truetype");
    font-weight: 700
}

@layer theme {

    :root,
    :host {
        --font-NeoSans: NeoSans, sans-serif;
        --default-font-family: var(--font-NeoSans);

        --color-red: oklch(0.3089 0.0997 26.57);
        --color-red2: oklch(0.5478 0.2093 29.74);
        --color-yellow: oklch(0.8186 0.1431 85.76);

        --color-white-15: oklch(1 0 0 / 0.15);
        --color-white: oklch(1 0 0);

        --color-dark-gray: oklch(0.383 0 0);
        --color-dark-gray2: oklch(0.6133 0 0);
        --color-light-gray: oklch(0.6512 0.0351 29.89);

        --color-light-red: oklch(0.965 0.021 92.5);
        --color-light-red2: oklch(0.9914 0.0098 87.47);
        --color-light-red3: oklch(0.9832 0.0142 84.58);
        --color-light-red4: oklch(0.9797 0.0167 88);
        --color-light-red5: oklch(0.9593 0.0175 8.77);
        --color-light-red6-20: oklch(0.8923 0.0463 19.71 / 0.20);
        --color-light-red7: oklch(oklch(0.9797 0.0167 88));
        --color-light-red8: oklch(0.997 0.0041 91.45);

        --color-light-red-20: oklch(0.885 0.085 24.5 / 0.20);
        --color-light-red-38: oklch(0.305 0.095 25.3 / 0.38);
        --color-light-red-5: oklch(0.305 0.095 25.3 / 0.05);

        --color-black-1: oklch(0.215 0 0);
        --color-black-2: oklch(0.2393 0 0);
    }
}

html,
:host {
    font-family: var(--default-font-family, 'Arial', sans-serif);
}

*,
::before,
::after {
    outline: none;
    box-sizing: border-box;
}

.main-content {
    overflow-x: hidden;
}

@layer utilities {

    .bg-red {
        background-color: var(--color-red);
    }

    .hover\:bg-red {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-red);
            }
        }
    }

    .group-hover\:bg-red {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                background-color: var(--color-red);
            }
        }
    }

    .group-hover\:bg-yellow {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                background-color: var(--color-yellow);
            }
        }
    }

    .hover\:bg-red {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-red);
            }
        }
    }

    .hover\:bg-yellow {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-yellow);
            }
        }
    }

    .border-red {
        border-color: var(--color-red);
    }

    .hover\:border-red {
        &:hover {
            @media (hover: hover) {
                border-color: var(--color-red);
            }
        }
    }

    .hover\:border-yellow {
        &:hover {
            @media (hover: hover) {
                border-color: var(--color-yellow);
            }
        }
    }

    .bg-red2 {
        background-color: var(--color-red2);
    }

    .bg-light-red {
        background-color: var(--color-light-red);
    }

    .bg-light-red2 {
        background-color: var(--color-light-red2);
    }

    .bg-light-red3 {
        background-color: var(--color-light-red3);
    }

    .bg-light-red3-20 {
        background-color: var(--color-light-red3-20);
    }

    .bg-light-red4 {
        background-color: var(--color-light-red4);
    }

    .bg-light-red6-20 {
        background-color: var(--color-light-red6-20);
    }

    .bg-light-red5 {
        background-color: var(--color-light-red5);
    }

    .bg-light-red7 {
        background-color: var(--color-light-red7);
    }

    .bg-light-red8 {
        background-color: var(--color-light-red8);
    }

    .bg-yellow {
        background-color: var(--color-yellow);
    }

    .bg-color-light-red-5 {
        background-color: var(--color-light-red-5);
    }

    .text-red {
        color: var(--color-red);
    }

    .hover\:text-red {
        &:hover {
            @media (hover: hover) {
                color: var(--color-red);
            }
        }
    }

    .group-hover\:text-red {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-red);
            }
        }
    }

    .border-red\/50 {
        @supports (color: color-mix(in lab, var(--color-red), var(--color-red))) {
            border-color:
                color-mix(in oklab, var(--color-red) 50%, transparent);
        }
    }

    .text-color-light-red-38 {
        color: var(--color-light-red-38);
    }

    .text-yellow {
        color: var(--color-yellow);
    }

    .group-hover\:text-yellow {
        &:is(:where(.group):hover *) {
            color: var(--color-yellow);
        }
    }

    .lg\:hover\:text-yellow {
        @media (width >=64rem) {
            &:hover {
                @media (hover: hover) {
                    color: var(--color-yellow);
                }
            }
        }
    }

    .text-light-red3 {
        color: var(--color-light-red3);
    }

    .text-dark-gray {
        color: var(--color-dark-gray);
    }

    .text-dark-gray2 {
        color: var(--color-dark-gray2);
    }

    .text-light-gray {
        color: var(--color-light-gray);
    }

    .text-black-1 {
        color: var(--color-black-1);
    }

    .text-black-2 {
        color: var(--color-black-2);
    }

    .bg-white-15 {
        background-color: var(--color-white-15);
    }

    .bg-gradient-left-white {
        background: linear-gradient(5deg, rgb(255 255 255 / 80) 20%, rgb(255 255 255 / 84) 65%)
    }

    .bg-gradient-center-white {
        background: linear-gradient(60deg, rgb(255 255 255 / 80) 20%, rgb(255 255 255 / 0) 65%)
    }

    .bg-gradient-top-yellow {
        background: linear-gradient(180deg, rgb(237 188 69 / 0) 20%, rgb(237 188 69 / 100) 65%)
    }

    .br-filter-white {
        box-shadow: 0 0 0 1.3px rgba(225, 225, 225, .88) inset;
        mask-image: radial-gradient(ellipse 115% 150% at right bottom, rgba(225, 225, 225, .22) 50%, rgba(225, 225, 225, .88) 100%);
        -webkit-mask-image: radial-gradient(ellipse 115% 150% at right bottom, rgba(225, 225, 225, .22) 50%, rgba(225, 225, 225, .88) 100%);
        mask-composite: intersect;
        -webkit-mask-composite: destination-in;
    }

    .backdrop-blur-xs {
        backdrop-filter: blur(4px)
    }

    .heroSwiper .swiper-pagination-bullet {
        background-color: var(--color-white) !important;
    }

    .heroSwiper .swiper-pagination-bullet-active {
        background-color: var(--color-yellow) !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        display: none;
    }

    .faq-open .vertical-line {
        transform: rotate(90deg);
    }

    .navbar.is-fixed {
        position: fixed
    }

    .header.is-fixed {
        position: fixed;
        z-index: 20;
        width: 100%;
    }

    .menu-open-no-scroll {
        overflow: hidden;
        height: 100vh;
    }

    .focus\:ring-yellow {
        &:focus {
            --tw-ring-color: var(--color-yellow);
        }
    }

    .scroll-overlay {
        scrollbar-width: thin;
        scrollbar-gutter: stable both-edges;
    }

    .scroll-overlay::-webkit-scrollbar {
        width: 8px;
        position: absolute;
    }

    .scroll-overlay::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll-overlay::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

    input::placeholder {
        color: rgba(88, 20, 18, 0.38);
    }

    select:invalid {
        color: rgba(88, 20, 18, 0.38);
    }

    select option {
        color: black;
        font-weight: 300;
    }

    select option:first-child {
        color: rgba(88, 20, 18, 0.38) !important;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    * {
        scrollbar-width: 5px;
        scrollbar-color: #d8d8d8 #fff;
    }

    .typewriter-text {
        padding-left: 10px;
        color: var(--color-yellow);
        border-left: solid var(--color-yellow) 5px;
        text-transform: uppercase;
        animation: cursor 1s ease-in-out infinite;
        font-weight: bold;
    }

    @keyframes cursor {
        from {
            border-color: var(--color-yellow);
        }

        to {
            border-color: transparent;
        }
    }

    .pinnedContainer {
        position: relative;
        width: 100%;
        overflow: visible !important;
    }

    .mockup-parent-container {
        position: relative;
        display: block;
    }

    .is-resizing .step-item {
        transition: none !important;
    }

    .pinnedContainer,
    #inner-mockup-image,
    .step-item {
        width: 100%;
    }

    .pinnedContainer,
    .mockup-parent-container {
        width: 100% !important;
        max-width: 100vw;
    }

    .mockup-parent-container {
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .step-item {
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (max-width: 1023px) {
    .menu-overlay {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    [data-text-anim] {
        visibility: hidden;
    }

    .scrolled .navbar-bg {
        opacity: .8;
        background: var(--color-red);
    }

    body.scrolled:not(.navbar-open) .m-logo {
        color: var(--color-white);
    }

    body.scrolled:not(.navbar-open) .toggle-line {
        background-color: #ffffff;
    }

    body.navbar-open .toggle-line {
        background-color: var(--color-red);
    }

    .navbar-open .navbar-bg {
        opacity: .2;
        background: transparent;
    }
}

@media (min-width: 1024px) {
    .submenu {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        transition: opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s;
        pointer-events: none;
    }

    .submenu-item:hover .submenu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .pin-spacing-container {
        margin-top: 50px;
        position: relative;
    }
}

@media (max-width: 460px) {
    .f-html {
        padding: var(--f-html-padding, 1.5rem);
    }
}