/* ================= BASE ================= */

body{
background:#0a0a0a;
color:white;
font-family:'Cinzel', serif;
}

/* ================= HERO ================= */

.hero{
height:80vh;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
}

.artist-hero{
position:relative;

background:
linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.95)),
url("../images/image3.jpeg");

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

.hero-overlay{
position:absolute;
inset:0;
background:radial-gradient(circle, rgba(230,57,70,0.12), transparent 70%);
}

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

.hero-content h2{
font-size:clamp(36px,6vw,60px);
margin-bottom:10px;

text-shadow:
0 0 10px rgba(230,57,70,0.7),
0 0 25px rgba(230,57,70,0.4);
}

.hero-content p{
color:#bbb;
}

/* SOCIALS (HERO) */
.hero-socials{
margin-top:20px;
display:flex;
justify-content:center;
gap:20px;
}

.hero-socials a{
color:#e63946;
font-size:22px;
transition:.3s ease;
}

.hero-socials a:hover{
transform:scale(1.3);
color:white;
text-shadow:0 0 15px red;
}

/* ================= PROFILE ================= */

.artist-profile{
padding:100px 10%;
background:#111;
text-align:center;
}

/* CARD */
.profile-card{
max-width:900px;
margin:auto;
padding:50px;

background:linear-gradient(145deg,#111,#050505);
border:1px solid rgba(230,57,70,0.3);
border-radius:20px;

box-shadow:
0 20px 50px rgba(0,0,0,1),
0 0 25px rgba(230,57,70,0.2);

transition:.3s;
}

.profile-card:hover{
transform:translateY(-5px);
box-shadow:
0 30px 70px rgba(0,0,0,1),
0 0 40px rgba(230,57,70,0.4);
}

/* TOP SECTION */
.profile-top{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:50px;
margin-bottom:40px;
}

/* IMAGE */
.profile-img{
width:180px;
height:180px;
border-radius:50%;
object-fit:cover;

border:3px solid #e63946;

box-shadow:
0 0 25px rgba(230,57,70,0.7),
0 0 50px rgba(230,57,70,0.4);
}

/* INFO */
.profile-info{
text-align:left;
max-width:320px;
}

.profile-info h2{
margin-bottom:10px;

text-shadow:
0 0 10px rgba(230,57,70,0.6),
0 0 20px rgba(230,57,70,0.3);
}

.role{
color:#e63946;
margin-bottom:10px;
font-weight:600;
}

.experience{
color:#aaa;
margin-bottom:10px;
}

/* SOCIALS */
.profile-socials{
display:flex;
gap:15px;
margin-top:10px;
}

.profile-socials a{
color:#e63946;
font-size:20px;
transition:.3s;
}

.profile-socials a:hover{
transform:scale(1.2);
color:white;
text-shadow:0 0 10px red;
}

/* BIO */
.bio{
margin-top:30px;
color:#ccc;
max-width:700px;
margin-left:auto;
margin-right:auto;
line-height:1.7;
font-size:15px;
}

/* ================= BUTTON ================= */

.book-btn{
display:inline-block;
margin-top:15px;
padding:12px 25px;

background:linear-gradient(135deg,#e63946,#8b0000);
color:white;
text-decoration:none;
font-weight:bold;

border-radius:8px;

transition:.3s;

box-shadow:
0 0 15px rgba(230,57,70,0.5);
}

.book-btn:hover{
transform:scale(1.08);
box-shadow:
0 0 30px rgba(230,57,70,1);
}

/* ================= GALLERY ================= */

.gallery{
margin-top:100px;
text-align:center;
}

.gallery h2{
margin-bottom:40px;
color:#e63946;

text-shadow:
0 0 10px rgba(230,57,70,0.7),
0 0 25px rgba(230,57,70,0.4);
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

/* IMAGES */
.gallery-grid img{
width:100%;
height:260px;
object-fit:cover;

border-radius:12px;

transition:.3s ease;

box-shadow:
0 10px 25px rgba(0,0,0,0.9);
}

.gallery-grid img:hover{
transform:scale(1.08);
filter:brightness(1.1);

box-shadow:
0 0 30px rgba(230,57,70,0.7);
}

/* ================= FOOTER ================= */

.site-footer{
text-align:center;
padding:20px;
background:black;
color:#777;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.profile-top{
flex-direction:column;
text-align:center;
}

.profile-info{
text-align:center;
}

}