/* Custom Styles */
.hover-text-custom-purple:hover {
    color: #8A2BE2; /* BlueViolet */
}

.bg-custom-purple {
    background-color: #8A2BE2; /* BlueViolet */
}

.hover-bg-custom-purple-dark:hover {
    background-color: #7B24CB; /* A slightly darker shade for hover */
}

.text-custom-purple {
    color: #8A2BE2; /* BlueViolet */
}

.vibe-code-div {
    background-color: rgba(138, 43, 226, 0.3); /* BlueViolet with 30% opacity */
    border-radius: 15px; /* Rounded corners */
    padding: 2rem; /* Spacing inside the div */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    backdrop-filter: blur(5px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    max-width: 60%; /* Or any other value that suits the design */
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    #home {
        padding-top: 4rem; /* Add padding to the top of the home section on mobile */
    }
    .vibe-code {
        padding: 0.5rem;
        max-width: 95%;
        max-height: 50vh;
        overflow-y: auto;
        background-color: rgba(138, 43, 226, 0.2); /* BlueViolet with 70% opacity for mobile */
    }

    .vibe-code h1 {
        font-size: 2rem; /* Reduce font size for h1 on mobile */
    }

    .vibe-code p {
        font-size: 1rem; /* Reduce font size for p on mobile */
    }
}