/* Title Hover Animation */

.title-hover {
    font-family: "Exo", sans-serif;
    
    font-variation-settings: "wght" 100;
    transition: 1s ease-out;

}
    .title-hover:hover {
        font-size: 28px;
    }


/* Title Hover Animation */


/* Holographic div */

.holographic-card {
    width: 50%;
    height: 50%;
    background: #111;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

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

    .holographic-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;
    }

    .holographic-card:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(6, 92, 92, 0.50);
    }

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

/* Holographic div */

/* div opacity */

.divShadowOpacity {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: opacity 250ms linear;
}
.divShadow:hover {
    /*opacity: 0.1;*/
    filter: brightness(200%);
    transform: scale(1.1) rotate(-3deg);
}

/* div opacity */