@font-face {
    font-family: 'Darknet';
    src: url('darknet/Darknet.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Darknet';
    src: url('darknet/Darknet Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

.font-darknet {
    font-family: 'Darknet', sans-serif;
}

@layer utilities {
    .skew-x-custom {
        transform: skewX(-15deg);
    }

    .unskew {
        transform: skewX(15deg);
    }

    .neon-border {
        border: 2px solid #ececec;
        box-shadow: 0 0 10px rgba(216, 216, 216, 0.3), inset 0 0 10px rgba(216, 216, 216, 0.2);
    }

    .speed-lines {
        background-image: repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(216, 216, 216, 0.05) 40px, rgba(216, 216, 216, 0.05) 42px);
    }

    .structural-grid {
        background-size: 50px 50px;
        background-image:
            linear-gradient(to right, rgba(216, 216, 216, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(216, 216, 216, 0.05) 1px, transparent 1px);
        perspective: 1000px;
        transform: rotateX(60deg) translateY(-200px);
    }


    /* Hover effect for the email input container */
    .input-hover-effect {
        transition: all 0.3s ease;
    }

    .input-hover-effect:hover {
        border-color: #0E46C7;
        box-shadow: 0 0 15px rgba(14, 70, 199, 0.4);
        background-color: rgba(14, 70, 199, 0.1);
    }

}

/* 3D Catalog Styles */
.perspective-container {
    perspective: 2000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

/* Custom Skew for Menu Panel to look 3D */
.skew-menu {
    transform: rotateY(15deg) translateZ(50px);
    transition: all 0.5s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.skew-menu:hover {
    transform: rotateY(5deg) translateZ(20px);
}

/* Custom Scrollbar for Catalog */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #FF5200;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cc4100;
}

/* Container Card Hover Effect */
.container-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.container-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Product Card Syles */
.product-card {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: #FF5200;
    transform: translateY(-2px);
}