.elementor-11080 .elementor-element.elementor-element-849565f{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */:root {
    --background: hsl(220, 25%, 8%);
    --foreground: hsl(210, 40%, 98%);
    --primary: hsl(280, 100%, 70%);
    --primary-foreground: hsl(210, 40%, 98%);
    --secondary: hsl(200, 100%, 50%);
    --secondary-foreground: hsl(210, 40%, 98%);
    --accent: hsl(340, 100%, 60%);
    --accent-foreground: hsl(210, 40%, 98%);
    --muted: hsl(220, 20%, 20%);
    --muted-foreground: hsl(215, 20%, 65%);
    --card: hsl(220, 20%, 12%);
    
    /* Neon colors */
    --neon-blue: hsl(200, 100%, 60%);
    --neon-pink: hsl(320, 100%, 60%);
    --neon-green: hsl(140, 100%, 50%);
    --neon-orange: hsl(30, 100%, 60%);
    --neon-purple: hsl(270, 100%, 70%);
    --neon-yellow: hsl(50, 100%, 60%);
    --neon-red: hsl(0, 100%, 60%);
}

/*.buttons-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
/*    gap: 1.5rem;*/
/*    max-width: 100%;*/
/*}*/

/*@media (min-width: 640px) {*/
/*    .buttons-grid {*/
/*        grid-template-columns: repeat(3, 1fr);*/
/*    }*/
/*}*/

/*@media (min-width: 768px) {*/
/*    .buttons-grid {*/
/*        grid-template-columns: repeat(4, 1fr);*/
/*    }*/
/*}*/

/*@media (min-width: 1024px) {*/
/*    .buttons-grid {*/
/*        grid-template-columns: repeat(5, 1fr);*/
/*    }*/
/*}*/

/*@media (min-width: 1280px) {*/
/*    .buttons-grid {*/
/*        grid-template-columns: repeat(8, 1fr);*/
/*    }*/
/*}*/

.play-button2 {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.play-button2:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.play-icon {
    width: 32px;
    height: 32px;
    transition: color 0.3s ease;
}

.ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0);
    transition: transform 0.5s ease-out;
}

.play-button2:hover .ripple {
    transform: scale(1);
}

/* Gradient backgrounds */
.gradient-primary-secondary {
    background: linear-gradient(to right, var(--primary), var(--secondary));
}

.gradient-secondary-accent {
    background: linear-gradient(to bottom right, var(--secondary), var(--accent));
}

.gradient-accent-primary {
    background: linear-gradient(to top right, var(--accent), var(--primary));
}

.gradient-blue-purple {
    background: linear-gradient(to right, var(--neon-blue), var(--neon-purple));
}

.gradient-pink-orange {
    background: linear-gradient(to bottom right, var(--neon-pink), var(--neon-orange));
}

.gradient-green-yellow {
    background: linear-gradient(to right, var(--neon-green), var(--neon-yellow));
}

.gradient-red-pink {
    background: linear-gradient(to bottom left, var(--neon-red), var(--neon-pink));
}

.gradient-triple {
    background: linear-gradient(to top right, var(--primary), var(--accent), var(--secondary));
}

.gradient-purple-blue {
    background: linear-gradient(to right, var(--neon-purple), var(--neon-blue));
}

.gradient-orange-red {
    background: linear-gradient(to bottom right, var(--neon-orange), var(--neon-red));
}

.gradient-yellow-green {
    background: linear-gradient(to right, var(--neon-yellow), var(--neon-green));
}

.gradient-secondary-primary {
    background: linear-gradient(to bottom left, var(--secondary), var(--primary));
}

.gradient-accent-purple {
    background: linear-gradient(to top right, var(--accent), var(--neon-purple));
}

.gradient-rainbow {
    background: linear-gradient(to right, var(--neon-red), var(--neon-orange), var(--neon-yellow));
}

.bg-card {
    background-color: var(--card);
}

.bg-muted {
    background-color: var(--muted);
}

/* Border colors */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-accent { border-color: var(--accent); }
.border-neon-blue { border-color: var(--neon-blue); }
.border-neon-pink { border-color: var(--neon-pink); }
.border-neon-green { border-color: var(--neon-green); }
.border-neon-orange { border-color: var(--neon-orange); }
.border-neon-purple { border-color: var(--neon-purple); }
.border-neon-yellow { border-color: var(--neon-yellow); }
.border-neon-red { border-color: var(--neon-red); }

/* Text colors */
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-neon-blue { color: var(--neon-blue); }
.text-neon-pink { color: var(--neon-pink); }
.text-neon-green { color: var(--neon-green); }
.text-neon-orange { color: var(--neon-orange); }
.text-neon-purple { color: var(--neon-purple); }
.text-neon-yellow { color: var(--neon-yellow); }
.text-neon-red { color: var(--neon-red); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }/* End custom CSS */