@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Inter:wght@300;400;600&display=swap');

:root {
    --main: #ff4d00;
    --dark: #0a0a0a;
    --grey: #1a1a1a;
    --white: #ffffff;
}

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    outline: none; border: none;
}

html { 
    font-size: 62.5%; /* 1rem = 10px for easier math */
    scroll-behavior: smooth; 
    background: var(--dark); 
    color: var(--white); 
    overflow-x: hidden;
}

section { padding: 8rem 9%; }

.heading { 
    font-family: 'Syncopate', sans-serif; 
    font-size: 4rem; 
    text-align: center; 
    margin-bottom: 5rem; 
    letter-spacing: 2px; 
    text-transform: uppercase;
}
.heading span { color: var(--main); }

.btn {
    display: inline-block;
    padding: 1.5rem 3.5rem;
    background: var(--main);
    color: var(--white);
    font-size: 1.8rem; /* Increased button text size */
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s;
    border: 2px solid var(--main);
    cursor: pointer;
}

.btn:hover { background: transparent; color: var(--main); }

/* --- HEADER --- */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000; background: rgba(10, 10, 10, 0.95);
    display: flex; align-items: center; justify-content: space-between;
    padding: 2rem 9%; border-bottom: 1px solid #333;
}

.header .logo img { height: 5rem; }
.header .navbar a { font-size: 1.6rem; color: var(--white); margin-left: 3rem; text-transform: uppercase; transition: 0.2s;}
.header .navbar a:hover { color: var(--main); }
.header .icons div { font-size: 2.5rem; color: var(--white); cursor: pointer; display: none; }

/* --- HERO SECTION (Bulletproof Widescreen Video) --- */
.home { 
    height: 100vh; 
    width: 100vw;
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: relative; 
    overflow: hidden;
}

/* ---
.video-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bg-video {
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Centers the video perfectly */
    object-fit: cover;
    opacity: 0.5; /* Dims video so text is readable */
}

/* --- BULLETPROOF HERO FIX --- */
.home {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000; /* Fallback color if image fails */
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sits at the back */
}

.ken-burns-img {
    width: 100%;
    height: 100%;
    /* TRY THIS: If '../images/' fails, change it to 'images/' or '/images/' */
    background-image: url('../images/hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    animation: zoom-move 20s infinite alternate linear;
}

.home .content {
    position: relative;
    z-index: 2; /* Ensures text is ALWAYS on top of the image */
    text-align: center;
}

@keyframes zoom-move {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.home .content {
    text-align: center;
    z-index: 1;
}

.home .content { text-align: center; position: relative; z-index: 1; max-width: 80rem; }
.home h1 { font-family: 'Syncopate', sans-serif; font-size: 7rem; line-height: 1.2; margin-bottom: 2rem;}
.home p { font-size: 2.2rem; margin-bottom: 3rem; color: #ccc; }

/* --- GALLERY GRID (Forces multiple images to show) --- */
.gallery .box-container { 
    display: grid; 
    /* This automatically creates columns. If the screen is wide, it shows 3-4 across. */
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr)); 
    gap: 3rem; 
}

.gallery .box { 
    background: var(--grey); 
    padding: 2rem; 
    text-align: center; 
    border: 1px solid #333;
    transition: 0.3s;
}

.gallery .box:hover { border-color: var(--main); transform: translateY(-5px); }
.gallery .box img { width: 100%; height: 45rem; object-fit: cover; margin-bottom: 2rem; }

/* Increased Text Sizes for Products */
.gallery .box .info h3 { font-size: 2.8rem; margin-bottom: 1.5rem; font-family: 'Syncopate', sans-serif; color: var(--main);}
.gallery .box .info p { font-size: 1.8rem; margin-bottom: 2.5rem; color: #ddd; line-height: 1.6;}

/* --- ARTIST SECTION --- */
.artist .row { display: flex; align-items: center; gap: 5rem; flex-wrap: wrap; }
.artist .row .image { flex: 1 1 40rem; }
.artist .row .image img { width: 100%; object-fit: cover; border: 2px solid #333; }
.artist .row .content { flex: 1 1 40rem; }
.artist .row .content p { font-size: 1.9rem; line-height: 1.8; color: #ccc; }

/* --- NEWS & SOCIALS --- */
.news .article-card { text-align: center; background: var(--grey); padding: 5rem; border: 1px solid #333; max-width: 80rem; margin: 0 auto; }
.news .article-card h3 { font-size: 3rem; margin-bottom: 2rem; }
.news .article-card p { font-size: 2rem; margin-bottom: 3rem; font-style: italic; color: #bbb;}

.social-feed { display: flex; justify-content: center; gap: 4rem; margin-top: 5rem; }
.social-feed i { font-size: 6rem; color: var(--white); transition: .3s; }
.social-feed i:hover { color: var(--main); transform: translateY(-10px); }

/* --- CONTACT --- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; }
.contact-card { background: var(--grey); padding: 5rem; text-align: center; border: 1px solid #333;}
.contact-card i { font-size: 5rem; color: var(--main); margin-bottom: 2rem; }
.contact-card h3 { font-size: 2.8rem; margin-bottom: 1.5rem; }
.contact-card p { font-size: 2rem; margin-bottom: 2.5rem; }

/* --- STICKY WHATSAPP --- */
.sticky-whatsapp {
    position: fixed;
    bottom: 3rem; right: 3rem;
    background: #25D366; /* Official WhatsApp Green */
    color: white;
    width: 6rem; height: 6rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    z-index: 1000;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
    transition: 0.3s;
}
.sticky-whatsapp:hover { transform: scale(1.1); background: #1ebe57; color: white;}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .header .icons div { display: inline-block; }
    .header .navbar { position: absolute; top: 100%; left: 0; right: 0; background: var(--dark); border-top: 1px solid #333; border-bottom: 1px solid #333; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: .2s linear; }
    .header .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
    .header .navbar a { display: block; margin: 2rem; font-size: 2rem; }
    .home h1 { font-size: 5rem; }
}