/* Section Background */
#styleUni {
    background: linear-gradient(135deg, #262626, #01404b, #24243e);
    padding: 3rem 2rem 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Heading */
.uni-heading {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3rem;
    text-shadow: 0 0 20px rgba(0, 245, 255, 0.8), 0 0 30px rgba(255, 0, 200, 0.5);
    position: relative;
    z-index: 1;
    font-family: 'Orbitron', sans-serif;
}

/* Grid Layout */
.uni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Cards */
.uni-card {
    background: linear-gradient(145deg, rgba(2, 219, 227, 0.25), rgba(251, 58, 209, 0.25));
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 245, 255, 0.3), 0 10px 40px rgba(255, 0, 200, 0.3);
    transition: all 0.4s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Card Image */
.uni-card img {
    max-width: 90px;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

/* Card Text */
.uni-card h3 {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 10px #00f5ff, 0 0 15px #ff00c8;
}

/* Hover Effects */
.uni-card:hover {
    transform: scale(1.07);
    border: 2px solid #00d2ff;
    box-shadow: 0 15px 50px rgba(0, 210, 255, 0.7), 0 15px 50px rgba(255, 0, 200, 0.7);
}


/* Orbiting Dots */
.uni-card::before,
.uni-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(45deg, #00f5ff, #ff00c8);
    box-shadow: 0 0 15px #00f5ff, 0 0 25px #ff00c8;
    top: 5%;
    left: 5%;
    filter: blur(2px);

    /* Orbit always on */
    animation-name: cornerOrbit;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.uni-card::after {
    animation-delay: 2.5s;
    /* second dot opposite phase */
}

/* Dot Orbit Path Animation */
@keyframes cornerOrbit {
    0% {
        top: 5%;
        left: 5%;
    }

    25% {
        top: 5%;
        left: calc(100% - 15px);
    }

    50% {
        top: calc(100% - 15px);
        left: calc(100% - 15px);
    }

    75% {
        top: calc(100% - 15px);
        left: 5%;
    }

    100% {
        top: 5%;
        left: 5%;
    }
}

/* Hover Glow Pulse - added without removing orbit */
.uni-card:hover::before,
.uni-card:hover::after {
    animation-name: cornerOrbit, glowPulse;
    animation-duration: 5s, 1.2s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-direction: normal, alternate;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 15px #00f5ff, 0 0 25px #ff00c8;
    }

    100% {
        box-shadow: 0 0 25px #00f5ff, 0 0 40px #ff00c8;
    }
}





/*  Responsive Design */
@media (max-width: 768px) {
    #styleUni {
        padding: 3rem 1.5rem;
    }

    .uni-heading {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    #styleUni {
        padding: 2.5rem 1rem;
    }

    .uni-heading {
        font-size: 1.5rem;
    }
}
