@import url(../main.css);

.holographic-button {
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    z-index: 1;
}

.holographic-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            var(--primary-dark));
    transform: rotate(-45deg) translateY(100%);
    transition: all 0.5s ease;

    opacity: 1;
    z-index: 0;
}

.holographic-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--gradient-start);
}

.holographic-button:hover::before {
    opacity: 0;
    transform: rotate(-45deg);
}

.demo_btn {
    background: var(--primary);
}

.demo_btn:hover {
    background: var(--primary-dark);
}

.demo_btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -40%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            var(--primary-dark));
    transform: rotate(-45deg) translateY(100%);
    transition: all 0.5s ease;
    opacity: 1;
    z-index: 0;
}

.hero_section_img iframe{
    transform: scale(1.4);
   
}