::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    scroll-behavior: smooth;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(111, 111, 111, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: 1px solid rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-button {
  display: none;
}

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f2f3;
    background: -moz-linear-gradient(342deg, rgba(235,236,237,1) 0%, rgba(241,242,243,1) 100%);
    background: -webkit-linear-gradient(342deg, rgba(235,236,237,1) 0%, rgba(241,242,243,1) 100%);
    background: linear-gradient(342deg, rgba(235,236,237,1) 0%, rgba(241,242,243,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebeced",endColorstr="#f1f2f3",GradientType=1);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    scroll-behavior: smooth;
}

.background {
    position: relative;
    width: 100vw;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Light beam styling */
.light-beam {
    position: absolute;
    top: 0;
    width: 300px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(145, 245, 235, 0.7), transparent);
    filter: blur(100px);
    opacity: 0.8;
    z-index: 2;
}

/* Position and tilt for each light beam */
.beam1 {
    left: 1%;
    top: -10%;
    width: 140px;
    height: 150dvh;
    background: linear-gradient(180deg, rgba(214, 54, 36, 0.7), transparent);
    filter: blur(80px);
    opacity: 0.6;
    transform: rotate(17deg);
}

.beam2 {
    left: 40%;
    top: -55%;
    width: 230px;
    height: 140dvh;
    transform: rotate(-14deg);
    filter: blur(80px);
    background: linear-gradient(180deg, rgba(68, 199, 184, 1), transparent);
    opacity: 0.8;
}

.beam3 {
    left: 40%;
    top: -60%;
    width: 50px;
    height: 140dvh;
    transform: rotate(-14deg);
    filter: blur(120px);
    background: linear-gradient(180deg, rgba(145, 245, 235, 1), transparent);
    opacity: 1;
}

.beam4 {
    left: 90%;
    top: -40%;
    width: 100px;
    height: 140dvh;
    transform: rotate(-32deg);
    filter: blur(110px);
    background: linear-gradient(180deg, rgba(214, 54, 36, 0.7), transparent);
    opacity: 1;
}

@media (max-width: 1600px) {
    .light-beam {
        position: absolute;
        top: 0;
        width: 300px;
        height: 100vh;
        filter: blur(100px);
        opacity: 0.8;
        z-index: 2;
    }

    .beam1 {
        left: 3%;
        width: 80px;
        height: 200dvh;
        top: -50%;
        opacity: 0.75;
        transform: rotate(17deg);
    }

    .beam2 {
        left: 44%;
        width: 180px;
        top: -110%;
        height: 200dvh;
        filter: blur(80px);
        opacity: 0.95;
    }

    .beam3 {
        left: 44%;
        width: 40px;
        filter: blur(120px);
        opacity: 1;
    }

    .beam4 {
        left: 95%;
        top: -50%;
        height: 200dvh;
        width: 50px;
        filter: blur(110px);
        opacity: 1;
    }
}

.wave-svg {
    position: absolute;
    bottom: -13%;
    left: 2%;
    width: 100%;
    height: auto;
    z-index: -1;
    filter: drop-shadow(0px -60px 40px rgba(0, 0, 0, 1));
    animation: fadeBottom 2s ease forwards;
    animation-delay: 1s;
    will-change: opacity, transform;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100px 100px;
    background-image: linear-gradient(to right, rgba(22, 22, 22, 0.032) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(22, 22, 22, 0.032) 1px, transparent 1px);
    z-index: 3;
}