/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* BODY */
body {
font-family: 'Hind Madurai', sans-serif;
background: radial-gradient(circle at top, #8b2c00, #1a0000);
color: white;
}

/* NAVBAR */
.navbar {
background: rgba(0,0,0,0.85);
border-bottom: 1px solid gold;
position: sticky;
top: 0;
z-index: 1000;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}

.logo {
color: gold;
font-weight: bold;
}

/* NAV */
.nav {
list-style: none;
display: flex;
gap: 20px;
}

.nav a {
color: white;
text-decoration: none;
transition: 0.3s;
}

.nav a:hover {
color: gold;
}

/* TITLE */
.title {
text-align: center;
padding: 50px 20px;
}

.title h1 {
color: gold;
font-size: 34px;
}

.title p {
margin-top: 10px;
opacity: 0.8;
}

/* POSTER SECTION */
.poster-section {
padding: 40px 20px;
text-align: center;
}

/* IMAGE DESIGN */
.poster {
width: 90%;
max-width: 900px;
margin: 25px auto;
display: block;

border-radius: 20px;

box-shadow: 0 0 40px rgba(255,215,0,0.4);

transition: 0.4s;
}

/* HOVER */
.poster:hover {
transform: scale(1.03);
box-shadow: 0 0 60px rgba(255,215,0,0.7);
}

/* DOWNLOAD */
.download {
text-align: center;
margin: 30px;
}

.download a {
background: gold;
color: black;
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}

.download a:hover {
background: #ffd700;
transform: scale(1.05);
}

/* REGISTER BUTTON 🔥 */
.register {
text-align: center;
margin: 40px 20px;
}

.register a {
display: inline-block;

background: linear-gradient(45deg, gold, #ffd700);
color: black;

padding: 15px 35px;
font-size: 18px;
font-weight: bold;

border-radius: 30px;
text-decoration: none;

transition: 0.4s;

box-shadow: 0 0 25px rgba(255,215,0,0.6);
}

.register a:hover {
transform: scale(1.1);
box-shadow: 0 0 50px rgba(255,215,0,1);
}

/* FOOTER */
footer {
text-align: center;
padding: 20px;
border-top: 1px solid gold;
margin-top: 20px;
}

/* MOBILE */
@media(max-width:768px){

.poster {
width: 95%;
}

.nav {
flex-direction: column;
background: black;
width: 100%;
text-align: center;
display: none;
}

.nav.active {
display: flex;
}

.register a {
font-size: 16px;
padding: 12px 25px;
}

}