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

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cinzel', serif;
}

body{
background:#0a0a0a;
color:white;
}

/* HEADINGS (UPDATED FONT) */
h1,h2,h3{
font-family:'TattooShop', serif;
letter-spacing:3px;
}

/* HEADER */
header {
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 40px;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(8px);
border-bottom:2px solid #8b0000;
position:sticky;
top:0;
z-index:1000;
}

/* LOGO */
.logo{
display:flex;
align-items:center;
gap:15px;
}

.site-logo{
width:100px;
height:100px;
object-fit:contain;
background:rgba(0,0,0,0.6);
padding:6px;
border-radius:50%;
border:2px solid #e63946;
box-shadow:
0 0 10px rgba(230,57,70,0.6),
0 0 20px rgba(230,57,70,0.3);
transition:0.3s ease;
}

.site-logo:hover{
transform:scale(1.08);
box-shadow:
0 0 15px rgba(230,57,70,0.9),
0 0 30px rgba(230,57,70,0.6);
}

.logo-text h1{
font-size:50px;
color:#fff;
letter-spacing:2px;
}

.logo-text p{
font-size:20px;
color:#e63946;
letter-spacing:1px;
}

/* NAV */
nav{
display:flex;
gap:22px;
align-items:center;
flex-wrap:wrap;
}

nav a{
position:relative;
color:white;
text-decoration:none;
font-weight:bold;
font-size:14px;
letter-spacing:1px;
padding:6px 4px;
transition:0.3s;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:#e63946;
transition:0.3s ease;
}

nav a:hover{
color:#e63946;
}

nav a:hover::after{
width:100%;
}

nav a.active{
color:#e63946;
text-shadow:0 0 10px rgba(230,57,70,0.9);
}

nav a.active::after{
width:100%;
}

/* MOBILE NAV */
.menu-toggle{
display:none;
font-size:26px;
color:#e63946;
cursor:pointer;
text-shadow:
0 0 8px rgba(230,57,70,0.8),
0 0 15px rgba(230,57,70,0.5);
}

@media(max-width:900px){

.menu-toggle{
display:block;
}

nav{
position:absolute;
top:100%;
left:0;
width:100%;
background:linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.98));
flex-direction:column;
align-items:center;
gap:18px;
padding:25px 0;
transform:translateY(-200%);
transition:0.4s ease;
border-bottom:2px solid #e63946;
box-shadow:0 10px 30px rgba(0,0,0,0.9);
}

nav.active{
transform:translateY(0);
}

nav a{
font-size:16px;
padding:10px;
}

nav a:not(:last-child){
border-bottom:1px solid rgba(255,255,255,0.05);
width:80%;
text-align:center;
}
}

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

background:
linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.9)),
url("https://static.wixstatic.com/media/6d6e01_6371a8f7cd184598bfb14cac8b673163~mv2.jpg");

background-size:cover;
}

.hero h2{
font-size:clamp(32px,6vw,60px);
margin-bottom:20px;
}

.hero p{
color:#bbb;
margin-bottom:25px;
}

/* HOURS */
.hours{
padding:100px 6%;
text-align:center;
background:#050505;
}

.hours h2{
font-size:32px;
margin-bottom:30px;
color:#e63946;
}

.hours-card{
max-width:520px;
margin:auto;
padding:30px;
background:#111;
border-radius:14px;
border:1px solid rgba(230,57,70,0.4);
box-shadow:0 0 15px rgba(230,57,70,0.2);
}

.hours-row{
display:flex;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid #222;
}

.hours-row:last-child{
border-bottom:none;
}

.hours-row span:last-child{
color:#e63946;
font-weight:bold;
}

/* CONTACT */
.contact{
padding:100px 10%;
background:#111;
text-align:center;
}

.tattoo-form{
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:18px;
}

.tattoo-form input,
.tattoo-form textarea,
.tattoo-form select{
padding:14px;
background:#000;
border:1px solid #333;
color:white;
border-radius:6px;
}

.tattoo-form button{
background:#e63946;
border:none;
padding:14px;
color:white;
font-weight:bold;
border-radius:6px;
cursor:pointer;
}

/* SOCIALS */
.shop-socials{
margin-top:30px;
text-align:center;
}

.shop-socials a{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
background:#111;
border:1px solid #333;
padding:14px;
margin:10px auto;
width:220px;
border-radius:10px;
color:white;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.shop-socials a:hover{
border-color:#e63946;
box-shadow:0 0 10px rgba(230,57,70,0.5);
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
background:black;
color:#777;
}

/* SPECIAL BANNER */
.special-banner{
width:100%;
background:#8b0000;
color:white;
text-align:center;
padding:10px;
font-weight:bold;
border-bottom:2px solid #e63946;
}

/* FLOATING LOGO */
.floating-logo{
position:fixed;
top:50%;
right:40px;
transform:translateY(-50%);
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
z-index:999;
box-shadow:
0 0 12px rgba(230,57,70,0.4),
0 0 25px rgba(230,57,70,0.2);
transition:0.3s ease;
animation:floatLogo 4s ease-in-out infinite;
}

.floating-logo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.floating-logo:hover{
transform:translateY(-50%) scale(1.12);
box-shadow:
0 0 20px rgba(230,57,70,0.9),
0 0 50px rgba(230,57,70,0.6);
}

@keyframes floatLogo{
0%{ transform:translateY(-50%) translateY(0); }
50%{ transform:translateY(-50%) translateY(-12px); }
100%{ transform:translateY(-50%) translateY(0); }
}