/* =========================
AFROBEAT PRODUCTIONS
========================= */

:root{
--green:#1F7C2C;
--green-dark:#14511d;
--gold:#F4C430;
--dark:#0d0d0d;
--white:#ffffff;
--gray:#f5f5f5;
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;
}

/* NAVIGATION */

.main-nav{
background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);
padding:15px 0;
transition:.3s;
z-index:999;
}

.navbar-brand img{
height:55px;
margin-right:10px;
}

.navbar-brand span{
font-weight:800;
font-size:1rem;
color:#fff;
}

.nav-link{
color:#fff !important;
font-weight:600;
margin-left:15px;
}

.nav-link:hover{
color:var(--gold) !important;
}

/* HERO */

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url('../images/hero-bg.jpg');

background-size:cover;
background-position:center;
overflow:hidden;
}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{
font-size:5rem;
font-weight:900;
line-height:1;
color:#fff;
margin-bottom:25px;
}

.hero h1 span{
display:block;
color:var(--green);
}

.hero-subtitle{
color:var(--gold);
font-weight:700;
letter-spacing:2px;
margin-bottom:20px;
}

.hero p{
color:#ddd;
font-size:1.2rem;
margin-bottom:30px;
max-width:600px;
}

.hero-image{
width:100%;
max-width:600px;
}

/* BUTTONS */

.btn-gold{
background:var(--gold);
color:#000;
padding:14px 30px;
font-weight:700;
border-radius:6px;
border:none;
text-decoration:none;
}

.btn-gold:hover{
background:#ffcf33;
color:#000;
}

.btn-green{
background:var(--green);
color:#fff;
padding:12px 25px;
font-weight:700;
border-radius:6px;
text-decoration:none;
}

.btn-green:hover{
background:var(--green-dark);
color:#fff;
}

/* SECTION HEADERS */

.section-header{
margin-bottom:50px;
}

.section-header h6{
color:var(--gold);
font-weight:700;
}

.section-header h2{
font-size:2.5rem;
font-weight:900;
}

/* ARTISTS */

.artists-section{
padding:100px 0;
background:#0f0f0f;
color:#fff;
}

.artist-card{
background:#181818;
border-radius:12px;
overflow:hidden;
transition:.4s;
margin-bottom:25px;
}

.artist-card:hover{
transform:translateY(-10px);
}

.artist-card img{
width:100%;
height:350px;
object-fit:cover;
}

.artist-card h4{
padding:20px;
font-weight:700;
}

/* ABOUT */

.about-section{
padding:120px 0;
background:#fff;
}

.about-section h2{
font-size:3rem;
font-weight:900;
margin-bottom:25px;
}

.about-section h6{
color:var(--green);
font-weight:700;
}

.about-section p{
font-size:1.1rem;
line-height:1.8;
}

/* LEADERSHIP */

.leadership{
padding:120px 0;
background:
linear-gradient(
90deg,
#052b0b,
#0b4f17
);
color:#fff;
}

.leader-card{
display:flex;
align-items:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
padding:20px;
border-radius:15px;
margin-bottom:25px;
}

.leader-card img{
width:180px;
height:220px;
object-fit:cover;
border-radius:10px;
margin-right:20px;
}

.leader-card h3{
font-weight:800;
}

.leader-card span{
display:block;
color:var(--gold);
margin-bottom:15px;
font-weight:700;
}

/* EVENTS */

.events{
padding:120px 0;
background:#050505;
color:#fff;
}

.event-card{
background:#111;
overflow:hidden;
border-radius:12px;
transition:.4s;
}

.event-card:hover{
transform:translateY(-8px);
}

.event-card img{
width:100%;
height:260px;
object-fit:cover;
}

.event-content{
padding:25px;
}

.event-content h3{
font-size:1.3rem;
font-weight:800;
}

/* STATS */

.stats{
padding:80px 0;
background:linear-gradient(
90deg,
var(--green-dark),
var(--green)
);
color:#fff;
}

.stats h2{
font-size:3rem;
font-weight:900;
color:var(--gold);
}

.stats p{
font-size:1.1rem;
font-weight:600;
}

/* FOOTER */

footer{
background:#0a0a0a;
color:#ccc;
padding:80px 0 30px;
}

.footer-logo{
height:90px;
margin-bottom:20px;
}

footer h4{
color:#fff;
margin-bottom:20px;
}

footer ul{
list-style:none;
padding:0;
}

footer li{
margin-bottom:10px;
}

footer a{
color:#ccc;
text-decoration:none;
}

footer a:hover{
color:var(--gold);
}

.copyright{
text-align:center;
padding-top:20px;
font-size:.95rem;
}

/* RESPONSIVE */

@media(max-width:991px){

.hero{
padding-top:100px;
text-align:center;
}

.hero h1{
font-size:3.5rem;
}

.hero-image{
margin-top:50px;
}

.leader-card{
flex-direction:column;
text-align:center;
}

.leader-card img{
margin-right:0;
margin-bottom:20px;
}

}

@media(max-width:768px){

.hero h1{
font-size:2.8rem;
}

.section-header h2{
font-size:2rem;
}

.about-section h2{
font-size:2.2rem;
}

.stats h2{
font-size:2rem;
}

}

@media(max-width:576px){

.hero h1{
font-size:2.3rem;
}

.navbar-brand span{
display:none;
}

.hero-buttons{
display:flex;
flex-direction:column;
gap:15px;
}

.btn-gold,
.btn-green{
display:block;
width:100%;
text-align:center;
}

}
.gallery img{
transition:.4s;
cursor:pointer;
}

.gallery img:hover{
transform:scale(1.05);
}

form .form-control{
padding:15px;
border-radius:8px;
}

.contact-info{
background:#111;
color:#fff;
padding:40px;
border-radius:15px;
}

.newsletter{
background:#111;
color:#fff;
padding:80px 0;
}

.newsletter input{
height:60px;
}

.testimonial-card{
background:#181818;
padding:30px;
border-radius:15px;
color:#fff;
height:100%;
}
/* PRELOADER */

#preloader{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:#000;

display:flex;
align-items:center;
justify-content:center;

z-index:99999;

transition:1s;
}

.loader-content{
text-align:center;
}

.loader-logo{

width:140px;

animation:
logoPulse 2s infinite;
}

#loaderText{

margin-top:20px;

font-size:2rem;

font-weight:800;

color:#fff;

letter-spacing:2px;
}

.loader-line{

width:0;

height:4px;

background:#F4C430;

margin:20px auto 0;

animation:
lineGrow 2s forwards;
}

@keyframes lineGrow{

to{
width:220px;
}

}

@keyframes logoPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}
.hero h1{

font-size:clamp(
2.5rem,
7vw,
5.5rem
);

line-height:1;
}