/* Pack 2 - homepage.css */

.hero{
    min-height:85vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:4rem 1.5rem;
    background:
        linear-gradient(rgba(8,10,18,.70),rgba(8,10,18,.88)),
        url("assets/images/hero-bg.jpg") center/cover no-repeat;
    color:#f5f1e8;
}

.eyebrow{
    letter-spacing:.35rem;
    text-transform:uppercase;
    color:#8fc8ff;
    font-size:.85rem;
    margin-bottom:1rem;
}

.hero h1{
    font-size:clamp(2.6rem,6vw,5rem);
    margin:.25rem 0;
    text-transform:uppercase;
}

.hero h2{
    color:#b9dfff;
    font-weight:400;
    margin-bottom:1.5rem;
}

.hero p{
    max-width:760px;
    line-height:1.8;
}

.btn{
    display:inline-block;
    margin-top:1.5rem;
    padding:14px 34px;
    border:2px solid #7ec8ff;
    border-radius:40px;
    color:white;
    text-decoration:none;
    transition:.3s ease;
}

.btn:hover{
    background:#7ec8ff;
    color:#08101a;
    transform:translateY(-2px);
}

section{
    max-width:1100px;
    margin:auto;
    padding:4rem 2rem;
}

section h2{
    color:#8fc8ff;
    margin-bottom:1rem;
}

ul{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1.2rem;
    list-style:none;
    padding:0;
}

li{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(143,200,255,.2);
    border-radius:14px;
    padding:1.25rem;
    transition:.3s;
}

li:hover{
    transform:translateY(-4px);
    border-color:#7ec8ff;
}

footer{
    text-align:center;
    padding:2rem;
    color:#c7c7c7;
}

@media (max-width:768px){
    .hero{
        min-height:70vh;
    }
    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:.75rem;
    }
}