/* Hero Section */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(45deg, var(--bs-gray-800), var(--bs-gray-700));
    background: #333333;
    display: flex;
    align-items: center;
    color: #ffffff;
    position: relative;
}

#net {
    background: transparent !important;
    /* Make the background transparent */
    position: relative;
    /* Ensure proper positioning */
    z-index: 1;
    /* Ensure it stays on top if needed */
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 0;

    /*position: absolute; top: 30%; right: -20%; width: 80vw; height: 90vh; z-index: 0; rotate: 329deg;*/
}

/* Optional: Ensure the canvas itself is transparent */
#net canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* Send the canvas behind the content */
}

.divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #dee2e6;
    position: absolute;
    top: 50%;
    width: 45%;
}

.divider::before {
    right: 55%;
}

.divider::after {
    left: 55%;
}

.btn-apple {
    background-color: #000;
    color: white;
    font-weight: 600;
}

.btn-apple:hover {
    background-color: #1a1a1a;
    color: white;
}