/* ================= FONT IMPORT ================= */
@font-face {
  font-family: 'TattooShop';
  src: url('fonts/ModernPrestige.otf') format('opentype');
}

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

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

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

.btn{
display:inline-block;
margin-top:20px;

background:linear-gradient(145deg,#8b0000,#e63946);

padding:14px 30px;

color:white;
text-decoration:none;
font-weight:bold;
letter-spacing:1px;

border-radius:8px;

border:1px solid rgba(230,57,70,0.6);

box-shadow:
0 0 10px rgba(230,57,70,0.5),
0 0 25px rgba(230,57,70,0.3);

transition:0.3s;
}

.btn:hover{
transform:translateY(-3px) scale(1.05);

box-shadow:
0 0 15px rgba(230,57,70,0.8),
0 0 40px rgba(230,57,70,0.6);

background:linear-gradient(145deg,#ff1a1a,#e63946);
}

.btn:active{
transform:scale(0.95);
}


/* ================= PIERCER ================= */

.piercer-highlight{
padding:100px 10%;
background:
linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.95)),
#111;

/* 🔥 CENTER FIX */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

min-height:100vh; /* full screen center */
}

.piercer-highlight h2{
color:#e63946;
text-shadow:
0 0 10px rgba(230,57,70,0.8),
0 0 25px rgba(230,57,70,0.5);
margin-bottom:40px;
}

.piercer-card{
display:flex;
gap:60px;
align-items:center;
justify-content:center;
max-width:1000px;
margin:auto;
flex-wrap:wrap;

/* ensures proper centering */
width:100%;
}

/* ================= 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);
}

/* ================= 💀 INSANE IMAGE SYSTEM ================= */

.piercer-img{
width:240px;
height:240px;

border-radius:50%;
overflow:hidden;

position:relative;

/* base ring */
border:3px solid #e63946;

/* depth */
box-shadow:
0 0 0 4px rgba(139,0,0,0.5),
0 0 25px rgba(230,57,70,0.4);

transition:0.4s ease;
}


/* IMAGE (FIXED — NO STRETCH EVER) */
.piercer-img img{
width:100%;
height:100%;

object-fit:cover;
object-position:center;

display:block;

transition:0.5s ease;
}


/* 🔥 OUTER ANIMATED GLOW */
.piercer-img::before{
content:"";
position:absolute;
inset:-6px;

border-radius:50%;

background:linear-gradient(
45deg,
#8b0000,
#e63946,
#ff1a1a,
#e63946,
#8b0000
);

z-index:-1;
filter:blur(12px);
opacity:0.6;

animation:glowPulse 4s infinite linear;
}


/* ⚡ INNER ENERGY RING */
.piercer-img::after{
content:"";
position:absolute;
inset:0;

border-radius:50%;
box-shadow:
inset 0 0 20px rgba(230,57,70,0.6),
inset 0 0 40px rgba(230,57,70,0.3);

pointer-events:none;
}


/* ================= 💀 HOVER ================= */

.piercer-img:hover{
transform:scale(1.08);
box-shadow:
0 0 0 6px rgba(255,0,0,0.9),
0 0 40px rgba(230,57,70,0.9),
0 0 100px rgba(230,57,70,0.7);
}

.piercer-img:hover img{
transform:scale(1.12);
}

.piercer-img:hover::before{
animation:glowFlicker 0.8s infinite alternate;
}


/* ================= 🔥 ANIMATIONS ================= */

@keyframes glowPulse{
0%{
transform:rotate(0deg) scale(1);
opacity:0.6;
}
50%{
transform:rotate(180deg) scale(1.05);
opacity:1;
}
100%{
transform:rotate(360deg) scale(1);
opacity:0.6;
}
}

@keyframes glowFlicker{
0%{ opacity:0.6; }
50%{ opacity:1; }
100%{ opacity:0.7; }
}


/* ================= INFO ================= */

.piercer-info{
max-width:500px;
text-align:left;
line-height:1.7;
color:#ccc;
}

.contact-text{
margin-top:15px;
font-size:18px;
color:white;
}

.highlight-note{
color:#e63946;
margin-top:10px;
font-weight:bold;
text-shadow:0 0 8px rgba(230,57,70,0.6);
}

/* ================= JEWELRY ================= */

.jewelry{
padding:100px 10%;
text-align:center;
}

.jewelry-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.jewelry-item{
background:linear-gradient(145deg,#111,#0a0a0a);
padding:25px;
border-radius:12px;
border:1px solid #333;

transition:0.3s;
}

.jewelry-item:hover{
transform:translateY(-8px) scale(1.02);
border-color:#e63946;

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


/* ================= PRICING ================= */

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

.pricing-note{
max-width:700px;
margin:auto;
margin-top:10px;
color:#bbb;
}


/* ================= DROPDOWNS ================= */

.pricing-dropdowns{
max-width:750px;
margin:auto;
margin-top:40px;
display:flex;
flex-direction:column;
gap:15px;
}

.pricing-dropdowns details{
background:linear-gradient(145deg,#000,#0a0a0a);
border:1px solid rgba(230,57,70,0.4);
border-radius:10px;
padding:16px;

transition:0.3s;
}

.pricing-dropdowns details:hover{
border-color:#e63946;

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

.pricing-dropdowns summary{
font-size:18px;
font-weight:bold;
cursor:pointer;
color:white;
}

.pricing-dropdowns ul{
margin-top:15px;
padding-left:20px;
line-height:1.7;
}

.pricing-dropdowns li{
padding:6px 0;
border-bottom:1px solid #222;
}


/* ================= STERILE ================= */

.sterile{
padding:100px 10%;
text-align:center;
background:#050505;
}

.sterile-badge{
border:1px solid rgba(230,57,70,0.4);
padding:40px;
border-radius:14px;
max-width:700px;
margin:auto;

background:linear-gradient(145deg,#111,#0a0a0a);

box-shadow:
0 10px 30px rgba(0,0,0,0.8),
0 0 15px rgba(230,57,70,0.3);
}


/* ================= AFTERCARE ================= */

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

.aftercare-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.aftercare-item{
background:linear-gradient(145deg,#000,#0a0a0a);
padding:25px;
border-radius:12px;
border:1px solid #333;

transition:0.3s;
}

.aftercare-item:hover{
transform:translateY(-6px);
border-color:#e63946;

box-shadow:
0 10px 25px rgba(0,0,0,0.8),
0 0 12px rgba(230,57,70,0.4);
}


/* ================= SOCIALS ================= */

.piercer-socials{
margin-top:25px;
display:flex;
flex-direction:column;
gap:12px;
}

.follow-piercer{
color:#bbb;
font-size:14px;
letter-spacing:1px;
}

.piercer-socials a{
display:inline-flex;
align-items:center;
gap:10px;

text-decoration:none;
color:white;

background:linear-gradient(145deg,#000,#0a0a0a);
padding:12px 18px;

border-radius:8px;
border:1px solid #333;

transition:0.3s;
}

.piercer-socials a i{
color:#e63946;
font-size:18px;
}

.piercer-socials a:hover{
background:#e63946;
transform:scale(1.07);

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

.piercer-socials a:hover i{
color:white;
}