#background{

    position:fixed;

    inset:0;

    background-image:
        linear-gradient(
            rgba(2,11,22,.35),
            rgba(2,11,22,.65),
            rgba(2,11,22,.92)
        ),
        url("../../assets/images/backgrounds/temple-hero.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-100;

}

#home{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:120px 40px 80px;

}

.hero{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    max-width:900px;

    gap:24px;

}

.hero-logo img{

    width:230px;

    filter:
        drop-shadow(0 0 20px rgba(90,170,255,.35));

}

.hero-title{

    font-size:72px;

    letter-spacing:10px;

    text-shadow:0 0 35px rgba(120,200,255,.30);

}

.hero-subtitle{

    font-size:30px;

    color:var(--secondary);

}

.hero-text{

    max-width:650px;

    color:var(--text-muted);

    font-size:18px;

}

.hero-button{

    margin-top:16px;

    padding:18px 48px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        #6CC5FF,
        #2A82FF
    );

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 35px rgba(40,120,255,.35);

}

.hero-button:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 55px rgba(40,120,255,.50);

}

.scroll-indicator{

    margin-top:20px;

    opacity:.55;

    animation:float 2.6s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}