body {
    margin:0;
    font-family: Arial;
    background:#0b0b0b;
    color:#fff;
}

.container {
    width:90%;
    margin:auto;
}

/* HEADER */
.main-header {
    position:absolute;
    width:100%;
    padding:20px 0;
}

.nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav ul {
    display:flex;
    gap:25px;
    list-style:none;
}

.nav li {
    cursor:pointer;
}

.nav .active {
    color:#ffb400;
}

/* HERO */
.hero {
    height:100vh;
    background:url('../images/hero-bg.jpg') no-repeat center/cover;
    display:flex;
    align-items:center;
}

.hero h1 {
    font-size:60px;
}

.hero span {
    color:#ffb400;
}

.btn {
    background:#ffb400;
    padding:12px 25px;
    display:inline-block;
    color:#000;
    margin-top:20px;
}

/* FEATURES */
.grid-5 {
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.feature-box {
    background:#111;
    padding:20px;
    text-align:center;
}

/* ABOUT */
.about {
    padding:60px 0;
    background:#111;
}

/* GALLERY */
.grid-4 {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.gallery img {
    width:100%;
}

/* EVENTS */
.grid-2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.event-card {
    background:#111;
    padding:40px;
}

.event-card.purple {
    background:linear-gradient(45deg,#6a00ff,#b300ff);
}

/* FOOTER */
.footer {
    background:#000;
    padding:40px 0;
}

.footer-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* TOP BAR */
.top-bar {
    background:#000;
    color:#fff;
    font-size:14px;
    padding:10px 0;
}

.top-flex {
    display:flex;
    justify-content:space-between;
}

.top-left span,
.top-right span {
    margin-right:15px;
}

.social-icons a {
    margin-left:10px;
    color:#ffb400;
}

/* FOOTER CONTACT */
.footer-contact {
    background:linear-gradient(90deg,#0b0b0b,#111);
    padding:25px 0;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
}

.contact-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.contact-box {
    display:flex;
    align-items:center;
    gap:15px;
}

.contact-box .icon {
    font-size:22px;
    color:#ffb400;
}

.contact-box small {
    color:#aaa;
}