.homepage-Card-Container {
    flex-wrap: wrap;
    width: 80%;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    margin: 1% 0;
}

.homepage-Card {
    background-color: var(--backgroundLightColor);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 93%;

    /* Box Shadow */
    border: 2px solid #ffffff54;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 30px 0px var(--shadowColor);
    border-radius: 15px;

    /* kept from second block */
    padding: 1%;
    margin: 7% 0;
    overflow: hidden;

    /* kept from second block */
    border-radius: 15px;
    transition: all 0.5s ease;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;

}

.homepage-Card-Container img {
    max-width: 40%;
    max-height: 8rem;
    object-fit: cover;
    filter: drop-shadow(0 0 20px var(--shadowColor));
}

.homepage-Card-Container h3 {
    padding: 6% 0 4% 0;
    color: var(--primaryColor);
}

.homepage-Card-Container h3,
.homepage-Card-Container h5 {
    width: 90%;
    text-justify: justify;
}

.homepage .homepage-Card h3 {
    text-transform: uppercase;
}

.homepage-Card h2 {
    color: #0ff;
    font-size: 2rem;
    position: relative;
    z-index: 2;
}

.homepage-Card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(0, 255, 255, 0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.homepage-Card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.homepage-Card:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}


/* 
---------------------------------------------------------------------------------
------------------------------Mobile Responsiveness------------------------------
---------------------------------------------------------------------------------
*/
@media (max-width: 1000px) {
    .homepage-Card-Container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .homepage-Card-Container {
        grid-template-columns: repeat(1, 1fr);
    }

}

@media (max-width: 700px) {}