/*
Theme Name: Ezilix Institute
Theme URI: https://ezilix.com
Author: Atta Ullah
Author URI: https://ezilix.com
Description: Custom WordPress theme for Ezilix Institute with ultra-modern dark mode tech aesthetics and CSS3 animated background shapes.
Version: 3.6
Text Domain: ezilix-institute
*/

/* --- CSS3 Tech Background Animations & Shapes --- */

/* Floating Orbs Keyframes */
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.1); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(-40px, 30px) scale(1.05); }
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* CSS Classes for Animated Shapes */
.tech-animated-bg {
    position: relative;
    overflow: hidden;
}

/* Moving Grid Lines Overlay */
.tech-animated-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Glowing Shape 1 (Cyan Orb) */
.tech-shape-1 {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 350px;
    height: 350px;
    background: rgba(6, 182, 212, 0.15);
    filter: blur(100px);
    border-radius: 50%;
    animation: orbFloat1 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Glowing Shape 2 (Indigo/Purple Orb) */
.tech-shape-2 {
    position: absolute;
    bottom: 20%;
    right: 15%;
    width: 400px;
    height: 400px;
    background: rgba(99, 102, 241, 0.15);
    filter: blur(120px);
    border-radius: 50%;
    animation: orbFloat2 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Glassmorphism Card Polish */
.tech-glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-glass-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15);
}